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

于是我网上一搜，得到一插件：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. Android toolbar menu 字体点击样式

    今天在做toolbar的时候,右边的菜单的点击事件,就是文字,然后文字的样式,文字的大小,文字的颜色,高了半天.最后发现,文字点下去之后是有样式的,也就是按下去有阴影. 哥哥的耐心好,就知道这不是问题 ...

  2. leetcode 【 Linked List Swap Nodes in Pairs 】 python 实现

    题目: Swap Nodes in Pairs Given a linked list, swap every two adjacent nodes and return its head. For ...

  3. dynamic基元类型与隐式类型的局部变量var

    dynamic代码示例 using System; using System.Collections.Generic; using System.Linq; using System.Text; na ...

  4. selenium初识（一）

    Selenium是一个开源的便携式的自动化软件测试工具,用于测试web应用程序.有能力在不同浏览器和操作系统运行.它是一套工具,帮助我们有效地给予web应用程序的自动化. Selenium分为以下几个 ...

  5. java 继承小结

    [code=java] //多态的经典例子 //向上转型后,父类只能调用子类和父类的共同方法和的重写方法(方法名相同,参数也相同),不能调用重载方法(方法名相同,但参数不同) class A { pu ...

  6. codeforces Registration system

     Registration system A new e-mail service "Berlandesk" is going to be opened in Berland in ...

  7. pycharm安装scipy,安装失败

    在pycharm中安装很长时间后,还是失败. 在命令行中尝试,使用python3. 命令:python3 -m pip install scipy. 发现下载速度很慢,只有十几k每秒,但scipy包有 ...

  8. 转载css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局

    转载  原文:http://www.divcss5.com/wenji/w732.shtml 原本不是圆形图片,通过CSS样式布局实现成圆形图片,首先图片必须为正方形. 二.使用布局技术   -    ...

  9. jQuery选择器之类选择器

    类选择器,顾名思义,通过class样式类名来获取节点. 描述: $('.class') 类选择器,相对于id选择器来说,效率相对会低一些,但是优势就是可以多选. 同样的jQuery在实现上,对于类选择 ...

  10. easyui中tab页中js脚本无法加载的问题及解决方法

    我发现tab页中<script src="xxx.js">方式加载的脚本没有生效,firebug看请求也没有请求相应的脚本文件. 单独在浏览器中打开tab页中的页面js ...