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

于是我网上一搜，得到一插件：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. Service Intent must be explicit

    参考: http://blog.csdn.net/qs_csu/article/details/45114251 我做阿里云账号登录的时候,遇到一个问题,不知道阿里云服务的包名.怎么办?第二种方法可以 ...

  2. Eclipse 菜单---Eclipse教程第04课

    Eclipse 查看的菜单栏通常包含以下几个菜单: File 菜单 Edit 菜单 Navigate 菜单 Search 菜单 Project 菜单 Run 菜单 Window 菜单 Help 菜单 ...

  3. laravel5.5缓存系统

    目录 1 Redis的配置 1.1 安装PRedis 1.2 配置 1.2.1 配置redis数据库 1.2.2 更改session的配置 1.2.3 更改cache配置 1.3 使用redis 2 ...

  4. css一些事儿

    1. margin和padding 如果边界画一条线,则margin的属于边界外,padding属于边界内 当我们给元素背景色时,margin区域不会被着色,而padding区域会被着色. 当上下两个 ...

  5. linux udp c/s

    一.UDP C/S编程的步骤如下图所示 二.与TCP C/S通信的区别在于:服务端没有设置监听和等待连接的过程.客户端没有连接服务端的过程.基于UDP的通信时不可靠地,面向无连接的,发送的数据无法确切 ...

  6. vue-i18n vue-cli项目中实现国际化 多语言切换功能 一

    vue-cli项目中引入vue-i18n 安装: npm install vue-i18n可参考vue-i18n官网文档 main.js中引入: import Vue from 'vue' impor ...

  7. ITIBB原创，互联网首部自媒体小说《1024伐木累》-小白篇之入职-总章节一

    小序 IT人不懂爱?代码汪是小白?又有谁,懂我情怀? 逗比青年,背上行囊,懵懵懂懂闯帝都!前途似海,来日方长! 青春无梦妄少年!认定就作,不平就说,碰撞火花,如此绚烂…… IT人有比格?其实,那是顽强 ...

  8. 如何创造财富？硅谷创业之父 Paul Graham 《黑客与画家》思维导图

    先送上亚马逊传送门:<黑客与画家>:硅谷创业之父 Paul Graham 文集 再送上一个思维导图: 下载大图:http://caifujianghu.com/article/ruhe-c ...

  9. php天龙八部

    <?php /* 一.操作步骤: 连接MySQL数据库 判断是否连接成功 选择数据库 设置字符集 准备SQL语句 向MySQL服务发送SQL语句 解析处理结果集 释放结果集,关闭数据库连接 */ ...

  10. Error: could not find java.dll 解决办法

    Error: could not find java.dll 问题: 安装配置Java环境变量后,在命令行中运行java -version进行测试时却出现下面的问题: Error: opening r ...