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 相关文章推荐
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
jquery(hide方法)隐藏指定元素实例
Nov 11 Javascript
js判断横竖屏及禁止浏览器滑动条示例
Apr 29 Javascript
JS实现的幻灯片切换显示效果
Sep 07 Javascript
Reactjs实现通用分页组件的实例代码
Jan 19 Javascript
Vue.js学习之计算属性
Jan 22 Javascript
ES6新数据结构Map功能与用法示例
Mar 31 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
Vue中父子组件通讯之todolist组件功能开发
May 21 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
原生javascript的ajax请求及后台PHP响应操作示例
Feb 24 Javascript
浅谈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
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
php中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
AES加解密在php接口请求过程中的应用示例
2016/10/26 PHP
PHP echo()函数讲解
2019/02/15 PHP
通过代码实例解析PHP session工作原理
2020/12/11 PHP
js异常捕获方法介绍
2013/04/10 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
javascript实现动态标签云
2015/10/16 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
2015/12/10 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
2016/07/06 Javascript
前端js弹出框组件使用方法
2020/08/24 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
2018/02/24 Javascript
使用elementUI实现将图片上传到本地的示例
2018/09/04 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
稍微学一下Vue的数据响应式(Vue2及Vue3区别)
2019/11/21 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
[40:06]DOTA2亚洲邀请赛 4.3 突围赛 Liquid vs VGJ.T 第一场
2018/04/04 DOTA
[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22
2020/11/24 DOTA
Python multiprocessing.Manager介绍和实例(进程间共享数据)
2014/11/21 Python
基于python实现文件加密功能
2020/01/06 Python
Django表单提交后实现获取相同name的不同value值
2020/05/14 Python
银行服务感言
2014/03/01 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
卖车协议书范例
2014/09/16 职场文书
工作能力自我评价2015
2015/03/05 职场文书
裁员通知
2015/04/25 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电