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

于是我网上一搜，得到一插件：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. Lambda与LINQ

    Lambda与LINQ写法对比: 上为Lambda 下为LINQ 显示指定列 Students.select(u=>(new {Name=u.Sname,Address=u.Saddress}) ...

  2. Hyper-V在线调整虚拟硬盘大小

    从Windows Server 2012 R2 开始,可以在线调整虚拟硬盘的大小了,这意味着当虚拟硬盘不够用时,我们在虚拟机运行的情况下直接扩展虚拟硬盘容量了.有人说这个有什么用?当然,实验室情况下, ...

  3. USACO Section1.1 Broken Necklace 解题报告

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

  4. Java基础-5运算符

    一).算数运算符: 算术运算符的功能是做各种算术运算,其操作数可以是字符型.整型或浮点型数据. 运算符 运算 示例 结果 备注 + 加 5+5 10   - 减 4-2 2   * 乘 2*3 6 既 ...

  5. Pytest+allure生成测试报告

    1.Allure.zip包的下载地址: https://github.com/allure-framework/allure2 在跳转页面选择一个allure.zip包的版本下载 若以上方法无法下载z ...

  6. Canvas 剪切图片

    /** * 剪切图像 */ function initDemo8(){ var canvas = document.getElementById("demo8"); if (!ca ...

  7. Ironic-Python-Agent

    Ironic-Python-Agent 在PXE部署环境中,deploy模块是通过打开一个iSCSI设备,ironic-conductro将OS的镜像文件写到iSCSI的设备,所以deploy_ram ...

  8. Leetcode 659.分割数组为连续子序列

    分割数组为连续子序列 输入一个按升序排序的整数数组(可能包含重复数字),你需要将它们分割成几个子序列,其中每个子序列至少包含三个连续整数.返回你是否能做出这样的分割? 示例 1: 输入: [1,2,3 ...

  9. XPS Enable GPIO on EMIO interface 不见了

    按照 <嵌入式系统软硬件协同设计实战指南 -- 基于xilinx Zynq>第九章 zedboard 入门 我一步一步做到9.1.2 (13) 发现 没有  Enable GPOI on ...

  10. android自定义SlideMenu源码详解之最简单侧滑实现

    实现原理:在一个Activity的布局中需要有两部分,一个是菜单(menu)的布局,一个是内容(content)的布局.两个布局横向排列,菜单布局在左,内容布局在右.初始化的时候将菜单布局向左偏移,以 ...