天猫首页迷思之－jquery实现整个div的懒加载（1）
懒加载是众所周知的减少网页负载，提高性能的方法，不少大型用图片用的多的网站都用到了。
于是我网上一搜，得到一插件：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）的更多相关文章
- 天猫首页迷思之－jquery实现整个div的懒加载(2)-插件面向对象化-闭包和原型的实例
前文有简单的实现了一个制作懒加载的方法,但其实以方法的形式做插件扩展性不强.那么本文就来用面向对象的方法将其制作成一个真正的插件: 我想要的最终的调用效果是: $(".loading&quo ...
- 天猫首页迷思之－jquery实现左侧广告牌图片轮播
本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...
- jquery.lazyload.js图片延迟加载(懒加载)--转载
一.插件介绍 jquery.lazyload.js 是一个用 JavaScript 编写的jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动 ...
- jquery.lazyload.js实现图片懒加载
个人理解:将需要延迟加载的图片的src属性全部设置为一张相同尽可能小(目的是尽可能的少占宽带,节省流量,由于缓存机制,当浏览器加载了一张图片之后,相同的图片就会在缓存中拿,不会重新到服务器上拿)的图片 ...
- 使用jquery插件实现图片延迟加载--懒加载技术
原文链接:http://www.cnblogs.com/lei2007/archive/2013/05/31/3110725.html 感谢作者.以下为原文,备忘仅供自己学习. 第一:lazyLoad ...
- 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- jquery实现简单瀑布流布局（续）：图片懒加载
# jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
- vue-cli3项目首页加载速度优化（cdn加速，路由懒加载，gzip压缩）
今天打算上线vue的单页面项目,上线后,首页加载速度巨慢! 原因是项目上线后,网速不够快,加载js,css等资源很慢, 打开打包好的文件发现chunk-vendors.xxxxxxx.js的包很大,达 ...
- 懒加载插件- jquery.lazyload.js
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
随机推荐
- luogu3343 [ZJOI2015]地震后的幻想乡
ref 前置技能是bzoj的串珠子.这种子集dp好神啊qwq. 还有这种钦定点转移子集的方法建议按这题的方法写,不要看串珠子qwq #include <iostream> #include ...
- Java中的初始化详细解析
今天所要详细讲解的是Java中的初始化,也就是new对象的过程中,其程序的行走流程. 先说没有静态成员变量和静态代码块的情况. public class NormalInit { public sta ...
- 实现jQuery的$.extend方法
var o1 = { hello : 1, old : 555 }, o2 = { abc : 55555555, hello : 2, fun : function() { alert(111); ...
- Windows下安装PHP及开发环境配置
一.Apache 因为Apache官网只提供源代码,如果要使用必须得自己编译,这里我选择第三方安装包Apache Lounge. 1. 进入Apachelounge官方下载地址:http://www. ...
- GLIBCXX3.4.21 not find
在执行世界杯的二进制代码和安装keepaway中会遇到GLIBCXX3.4.21 not find的问题,其解决办法就是升级安装GCC. 一.首先查看当前gcc版本 $ strings /usr/li ...
- Monkey、Monkeyrunner之间的区别
Monkey.Monkeyrunner之间的区别 一.Monkey Monkey是Android中的一个命令行工具,可以运行在模拟器里或实际设备中.它向系统发送伪随机的用户事件流(如按键输入.触摸屏输 ...
- J2EE的十三种技术——JDBC
背景: 之前准备软考的时候,我们就学习过J2SE的视频.在进入J2EE之前,一定要复习和回顾下Java的基础知识,这对以后的学习十分重要.首先,简单回忆下java的体系结构.Java有三个体系结构:J ...
- BZOJ2599 [IOI2011]Race 【点分治】
题目 给一棵树,每条边有权.求一条简单路径,权值和等于K,且边的数量最小.N <= 200000, K <= 1000000 输入格式 第一行 两个整数 n, k 第二..n行 每行三个整 ...
- BZOJ2125 最短路 【仙人掌最短路】
题目 给一个N个点M条边的连通无向图,满足每条边最多属于一个环,有Q组询问,每次询问两点之间的最短路径. 输入格式 输入的第一行包含三个整数,分别表示N和M和Q 下接M行,每行三个整数v,u,w表示一 ...
- P1613 跑路 (最短路,倍增)
题目链接 Solution 发现 \(n\) 只有 \(50\), 可以用 \(floyd\) . 然后 \(w[i][j][l]\) 代表 \(i\) 到 \(j\) 是否存在 \(2^l\) 长的 ...