picLazyLoad 实现图片延时加载(包含背景图片)


Posted in Javascript onJuly 21, 2016

如下所示: 

/**
 * picLazyLoad 图片延时加载,包含背景图片
 * $(img).picLazyLoad({...})
 * data-original 预加载图片地址
 * alon
 */
;(function($){
  $.fn.imgLazyLoad = function(settings){
    var $this = $(this),
      _winScrollTop = 0,
      _winHeight = $(window).height();
    settings = $.extend({
      threshold: 0, // 提前高度加载
      placeholder: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
      callback:function(){}
    }, settings||{});
    // 执行懒加载图片
    lazyLoadPic();
    // 滚动触发换图
    $(window).on('scroll',function(){
      _winScrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      lazyLoadPic();
    });
    // 懒加载图片
    function lazyLoadPic(){
      $this.each(function(){
        var $self = $(this);
        if($self.is('img')){
          if($self.attr('data-original')){
            var _offsetTop = $self.offset().top;
            if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
              $self.attr('src',$self.attr('data-original'));
              $self.removeAttr('data-original');
              $self.removeClass('loadH');
              settings.callback($self);
            }
          }
        }else{
          if($self.attr('data-original')){// 默认占位图片
            if($self.css('background-image') == 'none'){
              $self.css('background-image','url('+settings.placeholder+')');
            }
            var _offsetTop = $self.offset().top;
            if((_offsetTop - settings.threshold) <= (_winHeight + _winScrollTop)){
              $self.css('background-image','url('+$self.attr('data-original')+')');
              $self.removeAttr('data-original');
              settings.callback($self);
            }
          }
        }
      });
    }
  }
})(Zepto);

调用

$('img').imgLazyLoad({callback:function(data){
 
 })

以上这篇picLazyLoad 实现图片延时加载(包含背景图片)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现控制内容的向上向下滚动效果
Jun 26 Javascript
jQuery之$(document).ready()使用介绍
Apr 05 Javascript
javascript拖拽上传类库DropzoneJS使用方法
Dec 05 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
Oct 28 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
使用jQuery实现购物车结算功能
Aug 15 jQuery
React Native验证码倒计时工具类分享
Oct 24 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
vue2.0 实现富文本编辑器功能
May 26 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
Jun 24 jQuery
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 #Javascript
jQuery新窗口打开外链接
Jul 21 #Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 #Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
Jul 20 #Javascript
Node.js如何自动审核团队的代码
Jul 20 #Javascript
js只执行1次的函数示例
Jul 20 #Javascript
JQuery为元素添加样式的实现方法
Jul 20 #Javascript
You might like
PHP使用者状态管理功能的应用
2006/10/09 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP文件上传主要代码讲解
2013/09/30 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
2007/03/27 Javascript
jQuery常用操作方法及常用函数总结
2014/06/19 Javascript
8个超实用的jQuery功能代码分享
2015/01/08 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
Angularjs验证用户输入的字符串是否为日期时间
2017/06/01 Javascript
详解angularJS自定义指令间的相互交互
2017/07/05 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
vue双向绑定及观察者模式详解
2019/03/19 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
JS document内容及样式操作完整示例
2020/01/14 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
python利用标准库如何获取本地IP示例详解
2017/11/01 Python
python 字符串只保留汉字的方法
2018/11/16 Python
详解Python3中ceil()函数用法
2019/02/19 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
python能做哪些生活有趣的事情
2020/09/09 Python
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
建筑节能汇报材料
2014/08/22 职场文书
大学生联谊活动策划书(光棍节)
2014/10/10 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL