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

于是我网上一搜，得到一插件：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. 关于requestMapping 进行url映射实现小小知识点 以及如何获取请求的url中的参数

    requstMapping 用来处理url映射  可以作用在controller类上  也可以作用在方法上 经常使用的方式  通过接收一种映射关系 @RequestMapping("/del ...

  2. USACO Section1.4 Mother's Milk 解题报告

    milk3解题报告 —— icedream61 博客园(转载请注明出处)---------------------------------------------------------------- ...

  3. 自己搭建php服务器（可接受表单提交，并返回页面）

    0.概述 本demo实现以下功能: ①在html页面输入姓名和邮箱,点击提交(这里为get) ②服务器通过解析表单内容,返回对“姓名”和“邮箱”的一个欢迎页面 1.软件准备 ①xampp 作用:提供a ...

  4. 孤荷凌寒自学python第三十二天python的代码块中的异常的捕获

    孤荷凌寒自学python第三十二天python的代码块中的异常的捕获 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) 今天简单了解了Python的错误陷阱,了解到其与过去学过的其它语言非常类似 ...

  5. RAID介绍和实现

    RAID的全称是廉价磁盘冗余阵列(Redundant Array of Inexpensive Disks),于1987年由美国Berkeley 大学的两名工程师提出的. RAID出现的,最初目的是将 ...

  6. OZ常见错误解决办法

    执行成功 错误信息解决办法 libvirt.libvirtError: Failed to connect socket to '/var/run/libvirt/libvirt-sock': No ...

  7. Scrapy 学习笔记（一）数据提取

    Scrapy 中常用的数据提取方式有三种:Css 选择器.XPath.正则表达式. Css 选择器 Web 中的 Css 选择器,本来是用于实现在特定 DOM 元素上应用花括号内的样式这样一个功能的. ...

  8. poj1273 网络流入门题 dinic算法解决，可作模板使用

    Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 62078   Accepted: 2384 ...

  9. J2EE的十三个技术——EJB之消息驱动JMS

    JMS--Java Message Service JAVA的消息服务,消息可实现两端通信. 用于访问面向消息中间件的标准api,他提供与厂商无关的访问方法,以访问消息收发服务. 特点:即使其中一方不 ...

  10. web自动化测试：watir+minitest（四）

    脚本连跑: rake是ruby中的一个构建工具,和make很像.允许用ruby来写rakefile. 我们使用rake以任务的方式来运行我们的脚本集. 新建Rakefile文件,写入如下内容: req ...