一、前言

当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好;使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件jQuery.imgLazyLoad;使用该组件应在img标签中设置一个imglazyload-src属性,存放图片地址。

二、应用实例demo

  1. /**
  2. * component: imgLazyLoad 2013/12/12 华子yjh
  3. * invoking: jQuery.imgLazyLoad(options)
  4. *
  5. // 配置对象
  6. options = {
  7. container: 'body', // 外围容器,默认body
  8. tabItemSelector: '', // Tab切换面板选择器
  9. carouselItemSelector: '', // 图片轮播面板选择器
  10. attrName: 'imglazyload-src' // 图片地址属性
  11. diff: 300 // 预加载像素
  12. }
  13. *
  14. */

图片轮播懒加载:http://miiee.taobao.com
Tab切换图片懒加载:http://miiee.taobao.com/main.htm
浏览器滚动图片懒加载:http://miiee.taobao.com/themes/theme_151.htm

三、设计思路

1、处理浏览器下拉滚动

比较 $(window).scrollTop + $(window).height() 与 img.offset().top 的值,当图片在浏览器窗口中,开始加载图片

2、处理Tab切换 与 图片轮播

在处理Tab切换 与 图片轮播,组件提供了一个用于事件处理的函数 handleImgLoad,参数idx:

该参数对于图片轮播,是作为下一轮轮播面板的索引,将下一轮轮播面板中的所有图片预加载
对于Tab切换,则是作为tab项的索引,加载当前显示tab项中的所有图片

3、选择器处理

3.1、滚动下拉选择器的处理

在 配置对象中有一个attrName,是保持图片地址的一个属性 选择器为:img[config.attrName];

其次图片是显示的,如果隐藏,则不加载图片, 选择器为:img[config.attrName]:visible;

再次如果图片已加载,为其加上一个img-loaded的className,为了过滤已加载过的图片,选择器为:img[config.attrName]:visible:not(.img-loaded);

最后如果一个页面使用多次组件,第一次使用时,当配置对象container为body子元素,第二次应该过滤前一次container匹配元素中的图片,
依次类推,选择器为:img[config.attrName]:visible:not(.img-loaded):not(jQuery.imgLazyLoad.selectorCache)

3.2、Tab切换、图片轮播选择器的处理

在 配置对象中有tabItemSelector 或 carouselItemSelector ,结合事件处理函数的参数idx,获取当前Tab项或下一轮轮播面板中的图片
选择器为:tabItemSelector:eq(idx) img 或 carouselItemSelector:eq(idx) img

如果idx === undefined,选择器为:tabItemSelector:visible img 或 carouselItemSelector:eq(0) img
我是根据我自己写的jQuery组件自行判断的

四、组件源码

  1. $.extend({
  2. imgLazyLoad: function(options) {
  3. var config = {
  4. container: 'body',
  5. tabItemSelector: '',
  6. carouselItemSelector: '',
  7. attrName: 'imglazyload-src',
  8. diff: 0
  9. };
  10. $.extend( config, options || {} );
  11.  
  12. var $container = $(config.container),
  13. offsetObj = $container.offset(),
  14. compareH = $(window).height() + $(window).scrollTop(),
  15.  
  16. // 判断容器是否为body子元素
  17. bl = $.contains( document.body, $container.get(0) ),
  18.  
  19. // 过滤缓存容器中的图片
  20. notImgSelector = jQuery.imgLazyLoad.selectorCache ? ':not(' + jQuery.imgLazyLoad.selectorCache + ')' : '',
  21. imgSelector = 'img[' + config.attrName + ']:visible' + notImgSelector,
  22. $filterImgs = $container.find(imgSelector),
  23.  
  24. // 用于阻止事件处理
  25. isStopEventHandle = false,
  26.  
  27. // 是否自动懒加载,为true时,绑定滚动事件
  28. isAutoLazyload = false;
  29.  
  30. // 缓存容器为body子元素的图片选择器
  31. jQuery.imgLazyLoad.selectorCache = bl ? (jQuery.imgLazyLoad.selectorCache ? (jQuery.imgLazyLoad.selectorCache + ',' + config.container + ' img') : config.container + ' img') : jQuery.imgLazyLoad.selectorCache;
  32.  
  33. function handleImgLoad(idx) {
  34. if (isStopEventHandle) {
  35. return;
  36. }
  37. /**
  38. 处理Tab切换,图片轮播,在处理$filterImgs时,没有过滤img:not(.img-loaded),因为只是在一个面板中,
  39. 还有其他面板,如果再次触发,可能$filterImgs.length为0,因此只能在外围容器中判断过滤图片length
  40. */
  41. if ($container.find('img:not(.img-loaded)').length === 0) {
  42. isStopEventHandle = true;
  43. }
  44.  
  45. var itemSelector = config.tabItemSelector || config.carouselItemSelector || '';
  46. if (itemSelector) {
  47. if (typeof idx !== undefined && idx >= 0) {
  48. $filterImgs = $container.find(itemSelector).eq(idx).find('img');
  49. }
  50. else {
  51. if (itemSelector === config.carouselItemSelector) {
  52. $filterImgs = $container.find(itemSelector).eq(0).find('img');
  53. }
  54. else {
  55. $filterImgs = $container.find(itemSelector + ':visible').find('img');
  56. }
  57. }
  58. }
  59. else {
  60. $filterImgs = $filterImgs.not('.img-loaded'); // 自动懒加载,过滤已加载的图片
  61. isAutoLazyload = true;
  62. }
  63.  
  64. // 当外围容器位置发生变化,需更新
  65. offsetObj = $container.offset();
  66.  
  67. if ($filterImgs.length > 0) {
  68. $filterImgs.each(function(idx, elem) {
  69. var $target = $(elem),
  70. targetTop = $target.offset().top,
  71. viewH = $(window).height() + $(window).scrollTop() + config.diff;
  72.  
  73. if (bl) {
  74. $target.attr('src', $target.attr(config.attrName)).removeAttr(config.attrName).addClass('img-loaded');
  75. }
  76. // 内容在视窗中
  77. if (viewH > targetTop) {
  78. $target.attr('src', $target.attr(config.attrName)).removeAttr(config.attrName).addClass('img-loaded');
  79. }
  80. });
  81. }
  82. else {
  83. // 处理滚动事件
  84. isStopEventHandle = true;
  85. $(window).unbind('resize scroll', handleImgLoad);
  86. }
  87. }
  88.  
  89. handleImgLoad();
  90. if (isAutoLazyload) {
  91. $(window).bind('resize scroll', handleImgLoad);
  92. }
  93.  
  94. // 提供事件处理函数
  95. return {
  96. handleImgLoad: handleImgLoad
  97. }
  98. }
  99. });
  100.  
  101. // 保存非body子元素容器下的图片选择器
  102. jQuery.imgLazyLoad.selectorCache = '';

五、实例应用代码

  1. // 轮播图片 懒加载
  2. (function(){
  3. var imgLazyLoadObj = $.imgLazyLoad({
  4. container: '#first-block-switch',
  5. carouselItemSelector: '.switch-content li'
  6. });
  7. $.switchable({
  8. wrapSelector: '#first-block-switch',
  9. contentSelector: '.switch-content',
  10. prevBtnSelector: '.prev',
  11. nextBtnSelector: '.next',
  12. triggerSelector: '.switch-nav',
  13. autoPlay: true,
  14. duration: 300,
  15. interval: 3000,
  16. handleImgLoad: imgLazyLoadObj.handleImgLoad
  17. });
  18. }());
  19.  
  20. // 浏览器滚动 懒加载
  21. $.imgLazyLoad({ diff: 300 });

转载请注明出处:博客园华子yjh

jQuery.imgLazyLoad图片懒加载组件的更多相关文章

  1. jQuery的图片懒加载

    jQuery的图片懒加载 function imgLazyLoad(options) { var settings = { Id: $('img'), threshold: 100, effectsp ...

  2. 使用jQuery实现图片懒加载原理

    原文:https://www.liaoxuefeng.com/article/00151045553343934ba3bb4ed684623b1bf00488231d88d000 在网页中,常常需要用 ...

  3. 带加载进度的Web图片懒加载组件Lazyload

    在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...

  4. jQuery插件图片懒加载lazyload

    来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...

  5. jQuery实现图片懒加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. jquery <img> 图片懒加载 和 标签如果没有加载出图片或没有图片,就显示默认的图片

    参考链接:http://www.jq22.com/jquery-info390 或压缩包下载地址:链接:http://pan.baidu.com/s/1hsj8ZWw 密码:4a7s    下面是没有 ...

  7. 基于jquery的图片懒加载js

    function lazyload(option){ var settings={ defObj:null, defHeight: }; settings=$.extend(settings,opti ...

  8. [jQuery插件]手写一个图片懒加载实现

    教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...

  9. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

随机推荐

  1. 【vijos1243】 生产产品

    https://vijos.org/p/1243 (题目链接) 题意 一个产品的生产有m个步骤,一共n个机器人.机器人i完成步骤j的时间为T[i][j],每次当产品从一个机器人那里移动到另一个机器人那 ...

  2. 深入了解Mvc路由系统

    请求一个MVC页面的处理过程 1.浏览器发送一个Home/Index 的链接请求到iis.iis发现时一个asp.net处理程序.则调用asp.net_isapi 扩展程序发送asp.net框架 2. ...

  3. bzoj3669[Noi2014]魔法森林

    #include <iostream> #include <cstdio> #include <cstring> #include <cmath> #i ...

  4. UOJ244 【UER #7】短路

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...

  5. Webpack打包工具实时更新操作(启用观察者模式)

    可能存在这样的问题,每次修改完js/css文件之后,都要进行手动打包一下,浏览器上刷新一下. 那么我一般这样做: 1.安装Hbuilder,并启用边编辑边看的模式(其实这个是默认的). 2.启动Web ...

  6. [iOS 视频流开发-获得视频帧处理]

    调用视频流所使用框架:<Foundation/Foundation.h> 必须定义的参数: 1.AVCaptureDevice(捕获设备:前置.后置摄像头等) 2.AVCaptureInp ...

  7. mysql简单操作(实时更新)

    从表中删除某条记录: delete from table_name where xx=xxxx; 创建数据库(注意不同系统对大小写的敏感性): create database xxx; 查看数据库列表 ...

  8. 计算字符串高度 iOS

    公共类.h里 /** 返回自适应高度的文本 */ + (CGSize)sizeWithString:(NSString *)string font:(CGFloat)font maxWidth:(CG ...

  9. 总结jQuery选择器

    基本选择器 1. id选择器(指定id元素) 2. class选择器(遍历css类元素) 3. element选择器(遍历html元素) 4. * 选择器(遍历所有元素) 5. 并列选择器$('p,d ...

  10. Python 抓取网页并提取信息(程序详解)

    最近因项目需要用到python处理网页,因此学习相关知识.下面程序使用python抓取网页并提取信息,具体内容如下: #---------------------------------------- ...