懒加载是众所周知的减少网页负载，提高性能的方法，不少大型用图片用的多的网站都用到了。

于是我网上一搜，得到一插件：jquery.lazyload    网址：http://www.appelsiini.net/projects/lazyload

然而看了简单的demo之后，仍然只会写这种按照独立的控件来懒加载的代码：

$("img main").lazyload({placeholder:"images/cat_change_cloth.gif"});

既然要做一个肯钻研的人 ，当然不能止步于此。

简单观察以下天猫的首页。

1.主幻灯片div的第一次张幻灯片的加载，是长这样的。未加载完成之前，用户没法切换其他菜单栏。

2.第一张幻灯片加载完成后，是长这样的

你没看错，不是每张图片一个懒加载请求，而是多个图片，一个父div有一个懒加载请求。

那么难点来了。

1. 怎么把加载完成的替代图片放到中间。

2.怎么把懒加载请求转移到多个图片上。

首先，别着急用框架，了解以下jquery.lazyload的实现原理

框架，只针对能设置src的img或者background的div。然而我需要的是能够懒加载整个div中的元素，包括img和其他元素。

以为自己是没看懂，找了一天资料也没找到直接用jquery.lazyload的方法。

好吧，关键时刻，特殊需求，还是自己来写吧。

基本思路：懒加载是通过监听网页滚轮，在指定的时刻加载容器中的图片。那么，加载图片之前要有一个假的容器像用户展示正在加载，加载完成之后将innerhtml填充成真正要展示的。

1.给懒加载的div设置默认背景图片（添加一个class专门展示背景图片bg-loading），用作placeholder

2.第一次监听到滚轮到了懒加载div所在的位置，(等到div中图片全部加载完毕后)，去掉bg-loading类，填充innerhtml。

3.此后的每次监听到滚轮滚到指定位置，都不做任何处理 or 最好是不监听了。

好，详细到jquery中的每个操作：

源代码：

 <!DOCTYPE html>

 <html>

 <header>

     <meta http-equiv="Content-type" content="text/html;charset=utf-8">

     <title>jquery ajax</title>

     <style type="text/css">

         .loading{

             background:url(https://img.alicdn.com/tps/i1/TB1Q4fJFVXXXXXiXFXXJgUmHVXX-184-38.gif) no-repeat scroll 50% 50%;

         }

     </style>

     <script src="jquery.min.js"></script>

     <script type="text/javascript">

         $(document).ready(function(){

             lazyload_cc("loading",400);//body超出窗口400px之后再启用

         });

         function lazyload_cc(className,beginHeight){

             //功能：当div完整出现在屏幕时，加载。

             //参数className，需要进行懒加载的元素的类名，要取一样的名字

             //参数beginHeight，滚动条滚到哪里，开始监听

             //必须有inited熟悉你给，request-url属性，loading的图片自己准备。可以卸载.loading中。

             if(!className) {

                 console.error("lazyload_cc方法中缺少className参数");

                 return;

             }

             if(!beginHeight) beginHeight=0;

             lazyDivList=$("."+className);

             $(window).scroll(function(){

                 srcTop=$(window).scrollTop();

                 if(srcTop>=beginHeight){

                     lazyDivList.trigger("lazyme",$(window).scrollTop());

                 }

             });

             lazyDivList.bind("lazyme",function(e,scrTop){

                 var offset=$(this).offset().top;

                 var interval=$(window).height()-$(this).height();//当前页面可视高度

                 var sumB=offset;

                 var sumS=offset-interval;

                 var url=$(this).attr("request-url");

                 if(scrTop>=sumS && scrTop<=sumB){

                     $(this).load(url,function(responseTxt,statusTxt,xhr){

                         if (statusTxt=="success") {

                             $(this).removeClass(className);

                             $(this).unbind("lazyme");

                         };

                     });

                 }

             });

         }

     </script>

 </header>

 <body style="height:3000px;">

     <div class="loading" style="border:1px solid black;position:absolute;top:800px;left:500px;width:300px;height:400px;"  id="lazyu" request-url="requestU.html">abc</div>

     <div class="loading" style="border:1px solid black;position:absolute;top:1400px;left:500px;width:300px;height:400px;"  id="lazyu2"  request-url="requestU2.html">abc2</div>

 </body>

 <footer>

 </footer>

 </html>

完成插件后，以后要实现类似的效果可以直接使用 lazyload_cc(懒加载类名)，默认的beginHeight为0;

效果:

div还没到页面中间时，显示正在加载的背景图：

div在页面中间了，显示要展示的详细内容：背景图和原本div.innerhtml都消失了。

源码git地址：https://github.com/HappyBangs/bang_plugins/tree/master/plugin_TmallLazyLoad

建议在虚拟服务器上启动。

本文仅仅是提供了一个方法用于懒加载，并没有规范的做一个插件。插件如何制作见另一篇文章。

天猫首页迷思之－jquery实现整个div的懒加载（1）的更多相关文章

  1. 天猫首页迷思之－jquery实现整个div的懒加载(2)-插件面向对象化-闭包和原型的实例

    前文有简单的实现了一个制作懒加载的方法,但其实以方法的形式做插件扩展性不强.那么本文就来用面向对象的方法将其制作成一个真正的插件: 我想要的最终的调用效果是: $(".loading&quo ...

  2. 天猫首页迷思之－jquery实现左侧广告牌图片轮播

    本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...

  3. jquery.lazyload.js图片延迟加载(懒加载)--转载

    一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...

  4. jquery.lazyload.js实现图片懒加载

    个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...

  5. 使用jquery插件实现图片延迟加载--懒加载技术

    原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...

  6. 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js

    插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...

  7. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  8. vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）

    今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...

  9. 懒加载插件- jquery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

随机推荐

  1. HEXO next live2d插件删除问题

    title: HEXO next live2d插件删除问题 date: 2018-03-06 13:09:12 updated: tags: [hexo,next,建站,学习,前端技术,疑问] des ...

  2. soapUI的简单使用（webservice接口功能测试）

    1.soapUI支持什么样的测试? 功能测试.性能测试.负载.回归测试等,它不仅仅可以测试基于 SOAP 的 Web 服务,也可以测试 REST 风格的 Web 服务. 1.SoapUI安装注意事项 ...

  3. webdriver--定位一组元素＋iframe表单切换

    定位一组元素:find_elements,返回的是list,所以可以用列表的索引对列表里的某个元素操作,也可以用for循环访问list,依次操作各元素 driver.find_elements_by_ ...

  4. appium 多个设备同时执行

    测试需要同时在多个android设备上运行,就需要启动多个appium 使用adb命令获取udid,命令:adb get-serialno 使用的是testng测试框架,代码使用java编写 第一台, ...

  5. JMeter学习笔记（四） HTTP Cookies 管理器

    有些接口执行时,要求要先登录,此时就需要用到 HTTP Cookies 管理器.不过有些项目是使用的token,即添加HTTP信息头管理器,获取登录后的token,至于token与cookies的区别 ...

  6. yum常规操作的基本用法

    比如说,我想用nano编辑器的,发现没有安装, 这个时候你就可以用$ yum search nano 查询nano属于哪个安装包下. 发现就有nano这个安装包, 这个时候安装一下这个安装包,$ su ...

  7. Class对象和反射

    1.class对象在java中一切都是对象,从某种意义上,java中的对象可以分为:实例对象和Class对象.实例对象通过new关键得到,那么Class对象呢?Class对象无法通过new关键字获取, ...

  8. java单例模式（类只能创建唯一对象）

    //饿汉式 class Single { private static final Single s= new Single(); private Single(){} public static S ...

  9. HDU 4109 Instrction Arrangement（DAG上的最长路）

    把点编号改成1-N,加一点0,从0点到之前任意入度为0的点之间连一条边权为0的边,求0点到所有点的最长路. SPFA模板留底用 #include <cstdio> #include < ...

  10. SQLAlchemy技术文档（中文版）（中）

    10.建立联系(外键) 是时候考虑怎样映射和查询一个和Users表关联的第二张表了.假设我们系统的用户可以存储任意数量的email地址.我们需要定义一个新表Address与User相关联. from ...