引入时间维度和空间维度,让信息流向它该去的地方!绽放你的思想。。。
随笔- 466&
评论- 221&
1.引用&script src="/apps/baron/js/??lib/tmm/tmm.js,lib/lazyload/lazyload.js?"&&/script&
2.对于要懒加载的图片进行如下属性设置。&img src="/mw/webapp/fav/img/grey.gif" dataimg="/tps/i3/T1xl4_FlFaXXcLmU_5-305-317.png" /&
其中src为未加载时的图片，dataimg为实际要加载的图片。
3.执行lazyload.init();
4.分tab的懒加载。判断tab把下面的图片有没加载过。根据loaded属性判断，还要对非当前tab所属的图片进行class lazy去掉。对已加载的loaded为true的图片，不加lazy属性
5.注意lazyload.init()的执行时机，如果在dom ready阶段执行，会下载所有图片，不能实现懒加载。要在winow.onload完成这个阶段去执行。
lazyload.js代码解读：
* 基于jQuery或者zeptoJS的惰性加载
var lazyload = {
init : function(opt){
var that = this;
var op = {
anim: true,
extend_height:400
// 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt
$.extend(op,opt);
// 调用lazyload.img.init(op)函数
that.img.init(op);
init : function(n){
var that = this;
console.log(n);
// 要加载的图片是不是在指定窗口内
function inViewport( el ) {
// 当前窗口的顶部
var top = window.pageYOffset
// 当前窗口的底部
var btm = window.pageYOffset + window.innerHeight
// 元素所在整体页面内的y轴位置
var elTop = $(el).offset().
// 判断元素，是否在当前窗口，或者当前窗口延伸400像素内
return elTop &= top && elTop - n.extend_height &= btm
// 滚动事件里判断，加载图片
$(window).bind('scroll', function() {
$('img.lazy').each(function(index,node) {
var $this = $(this)
if(!$this.attr('dataimg')){
if ( !inViewport(this) ) return
act($this)
}).trigger('scroll')
// 展示图片
function act(_self){
// 已经加载过了，则中断后续代码
if (_self.attr('loaded')) return;
var img = new Image(), original = _self.attr('dataimg')
// 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示
img.onload = function() {
_self.attr('src', original).removeClass('lazy');
n.anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
// 当你设置img.src的时候，浏览器就在发送图片请求了
original && (img.src = original);
_self.attr('loaded', true);
日添加用例
&!doctype html&
&html lang="en"&
&meta charset="UTF-8" /&
&title&懒加载实例&/title&
&style type="text/css"&
/*一定要有预先高度*/
width: 600px;
height: 260px;
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./11de79502d0af.jpg!v1sell" alt="" /&
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./33f99f823ed3d.jpg!v1sell" alt="" /&
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./.jpg!v1sell" alt="" /&
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./67f87ba08cf0.jpg!v1sell" /&
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./22ec075a17c33.jpg!v1sell" alt="" /&
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./2e4a.jpg!v1sell" alt="" /&
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./c2f.jpg!v1sell" alt="" /&
&img class="samLazyImg" src="/mw/webapp/fav/img/grey.gif" dataimg="http://yangege./33f996b4386ab.jpg!v1sell" alt="" /&
&script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"&&/script&
&script type="text/javascript"&
var lazyload = {
init : function(opt){
var that = this,
anim: true,
extend_height:0,
selectorName:"img",
realSrcAtr:"dataimg"
// 合并对象，已有的{anim:true}+用户自定义对象。也就是op = op + opt
$.extend(op,opt);
// 调用lazyload.img.init(op)函数
that.img.init(op);
init : function(n){
var that = this,
selectorName = n.selectorName,
realSrcAtr = n.realSrcAtr,
console.log(n);
// 要加载的图片是不是在指定窗口内
function inViewport( el ) {
// 当前窗口的顶部
var top = window.pageYOffset,
// 当前窗口的底部
btm = window.pageYOffset + window.innerHeight,
// 元素所在整体页面内的y轴位置
elTop = $(el).offset().
// 判断元素，是否在当前窗口，或者当前窗口延伸400像素内
return elTop &= top && elTop - n.extend_height &=
// 滚动事件里判断，加载图片
$(window).on('scroll', function() {
$(selectorName).each(function(index,node) {
var $this = $(this);
if(!$this.attr(realSrcAtr) || !inViewport(this)){
act($this);
}).trigger('scroll');
// 展示图片
function act(_self){
// 已经加载过了，则中断后续代码
if (_self.attr('lazyImgLoaded')) return;
var img = new Image(),
original = _self.attr('dataimg');
// 图片请求完成后的事件，把dataimg指定的图片，放到src里面，浏览器显示
img.onload = function() {
_self.attr('src', original);
anim && _self.css({ opacity: .2 }).animate({ opacity: 1 }, 280);
// 当你设置img.src的时候，浏览器就在发送图片请求了
original && (img.src = original);
_self.attr('lazyImgLoaded', true);
* selectorName，要懒加载的选择器名称
* extend_height
是否开启动画
* realSrcAtr
图片真正地址*/
lazyload.init({
anim:false,
selectorName:".samLazyImg"
阅读(...) 评论()JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)
作者：Jake
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下
懒加载的意义（为什么要使用懒加载）
在上篇文章给大家介绍了大家可以参考下。
懒加载的意义（为什么要使用懒加载）
对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。
所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。
将页面中的img标签src指向一张小图片或者src为空，然后定义data-src（这个属性可以自定义命名，我才用data-src）属性指向真实的图片。src指向一张默认的图片，否则当src为空时也会向服务器发送一次请求。可以指向loading的地址。
注：图片要指定宽高
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" /&
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
在写代码前，需要了解各种高度。先看这篇文章scrollTop,offsetTop,scrollLeft,offsetLeft
&meta charset="UTF-8"&
&title&Document&/title&
margin-bottom: 50
width: 400
height: 400
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
&img src="default.jpg" data-src="/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt=""&
JavaScript
var num = document.getElementsByTagName('img').
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll =
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientH //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollT //滚动条距离顶部高度
for (var i = i & i++) {
if (img[i].offsetTop & seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
n = i + 1;
var n = 0,
imgNum = $("img").length,
img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = i & imgN i++) {
if (img.eq(i).offset().top & parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
使用节流函数进行性能优化
如果直接将函数绑定在scroll事件上，当页面滚动时，函数会被高频触发，这非常影响浏览器的性能。
我想实现限制触发频率，来优化性能。
节流函数：只允许一个函数在N秒内执行一次。下面是一个简单的节流函数：
// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time 在time时间内必须执行一次
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔，触发 handler
if (curTime - startTime &= time) {
fun.apply(context, args);
startTime = curT
// 没达到触发间隔，重新设定定时器
timeout = setTimeout(fun, delay);
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));
以上所述是小编给大家介绍的JavaScript如何实现图片懒加载(lazyload) 提高用户体验(增强版)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具10:31 提问
如何使用懒加载的方式加载div？
我有一个高约500px的div，其中的子div会超出这个div的显示范围。
我在网上看了一些懒加载的js，都是对图片进行懒加载。
求大神帮我解决下这个问题，让我让子div只加载可见的部分。
希望能给出解决的代码！！！多谢！！！
按赞数排序
其他相似问题3738人阅读
JQuery（20）
懒加载是网站性能优化的插件，可以提高用户体验。
页面如果有很多图片的时候，当你滚动到相应的行时，当前行的图片才即时加载的，这样子的话页面在打开只加可视区域的图片，而其它隐藏的图片则不加载。
1、引入jquery
&script type=&text/javascript& src=&/jquery/1.8.0/jquery.min.js& &&/script&
2、引入jquery懒加载插件
&script type=&text/javascript& src=&///jquery.lazyload/1.9.1/jquery.lazyload.min.js&
&&/script&
3、在需要懒加载的图片上添加如下：
&img class='lazy' src='../images/i.png' data-original='& + obj.picurl + &' width='600' height='300' &&;
src显示默认的图片
data-original为要显示的图片
4、启动懒加载
$(&img.lazy&).lazyload();
一般放在ajax complete中加载
如下代码：
type: 'POST',
url: NET.getBisList,
dataType: 'json',
async: true,
'city': city,
'districtid': districtid,
'cont': cont,
'page': page,
'lon': lon,
'lat': lat,
'keywords': keywords,
'distance': distance
success: function(data) {
if (data.state == 0000) {
var str = &&;
for (var i = 0; i & data.msg. i++) {
var obj = data.msg[i];
str += &&li class='shop_det' onclick='openBusinessDet(& + obj.id + &)'&&;
str += & &div&&;
&div class='shop_prof'&&;
&input type='hidden' name='id' id='B_id' value='& + obj.id + &'/&&;
str += & &img class='lazy' src='../images/maititi.png' data-original='& + obj.picurl + &' width='600' height='300' onerror='loadImgError(& + obj.id + &)' id='img& + obj.id + &'&&;
&div class='info_det'&&;
str += & &span class='name_det'&& + obj.bisname + &&/span&&;
&span class='location'&距您& + (obj.distance / 1000).toFixed(1) + &km&/span&&;
str += & &span class='add_det'&& + obj.address + &&/span&&;
str += & &/div&&;
str += &&/li&&;
$('#showshops').append(str);
$(&#loadMore&).html(&点击加载更多&);
//没有数据
$(&#loadMore&).html(data.msg);
$(&#loadMore&).unbind(&click&); //移除click
complete: function() {
$(&img.lazy&).lazyload();
error: function(xhr, type) {
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：608913次
积分：7731
积分：7731
排名：第2630名
原创：227篇
转载：100篇
评论：79条
文章：11篇
阅读：51095
阅读：14304
阅读：22477
文章：25篇
阅读：42176
文章：47篇
阅读：126930
文章：24篇
阅读：21322
(1)(10)(2)(6)(6)(1)(3)(1)(5)(1)(6)(15)(4)(3)(2)(8)(1)(2)(2)(2)(4)(7)(4)(2)(1)(2)(14)(10)(2)(4)(2)(1)(6)(14)(8)(2)(4)(8)(56)(66)(1)(2)(3)(16)(6)(2)js实现图片懒加载 - 简书
js实现图片懒加载
图片懒加载
现如今，网站载有的信息量越来越大，其中图片占据着很大一部分，这样一来可以使整个页以面图文结合的形式展现，更加美观。
然而问题来了，如果是一个图片列表页，虽然好看，但是相关图片的加载要耗费非常长的时间，等待图片一格一格的加载，实在让人抓狂，如何优化此类页面呢？
解决的方法有两种（笔者自己总结，欢迎在文章评论中给我留言介绍其它方法）：
1.利用ajax技术将此类页面做成瀑布流2.图片懒加载
综上所述，如果在没有ajax支持的情况下，图片懒加载是一个非常好的选择。
页面加载后只让文档可视区内的图片显示，其它不显示，随着用户对页面的滚动，判断其区域位置，生成img标签，让到可视区的图片加载出来（正所谓响应了党的号召：让一部分人先富起来，从而带动其他人富起来，最终实现共同富裕）。
所用相关技术：
给img的父级加属性 (例如data-src），将图片的地址赋值给他，这样就生成img标签后再把data-src的值赋给img的src（通过dataset.src或者getAttribute('src'),再赋值给img.setAttribute('src')）。
*{margin:0;padding:0;}
ul{overflow:}
li{list-style:width:10height:12border:1px solid #box-sizing:border--webkit-box-sizing:border-float:overflow:position:}
li i{width:20height:20border-radius:20position:border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11margin-left:-11animation:move 1-webkit-animation:move 1}
li i:before{position:width:5height:5border-radius:4content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#border:1px solid #top:-3left:50%;margin-left:-3}
img{vertical-align:border-width:0;width:100%;position:z-index:1;}
@keyframes move{
transform:rotateZ(0);
transform:rotateZ(360deg);
@-webkit-keyframes move{
-webkit-transform:rotateZ(0);
-webkit-transform:rotateZ(360deg);
这里用css3写了一个可以循环转动的loading，相关的制作方法，欢迎观看我的另一篇文章
·html部分
&li data-src="/58pic/17/18/97/01U58PIC4Xr_1024.jpg"&&i&&/i&&/li&
&li data-src="http://cover./mfsv2/download/fdsc3/p01N203pHTU7/Wr5314kcLAtVCi.jpg!t"&&i&&/i&&/li&
&li data-src="1.z0./71.jpg"&&i&&/i&&/li&
&li data-src="http://cover./mfsv2/download/fdsc3/p01a3SXHo2hZ/XYAC5TLk4uYWXn.jpg!t"&&i&&/i&&/li&
&li data-src="/00/16/18/bf3.jpg"&&i&&/i&&/li&
&li data-src="/upimg/allimg/c63B0O.jpg"&&i&&/i&&/li&
&li data-src="/58pic/17/18/97/01U58PIC4Xr_1024.jpg"&&i&&/i&&/li&
&li data-src="http://cover./mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"&&i&&/i&&/li&
&li data-src="1.z0./71.jpg"&&i&&/i&&/li&
&li data-src="/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"&&i&&/i&&/li&
&li data-src="/00/16/18/bf3.jpg"&&i&&/i&&/li&
&li data-src="/upimg/allimg/c63B0O.jpg"&&i&&/i&&/li&
&li data-src="/58pic/17/18/97/01U58PIC4Xr_1024.jpg"&&i&&/i&&/li&
&li data-src="http://cover./mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"&&i&&/i&&/li&
&li data-src="1.z0./71.jpg"&&i&&/i&&/li&
&li data-src="/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"&&i&&/i&&/li&
&li data-src="/00/16/18/bf3.jpg"&&i&&/i&&/li&
&li data-src="/upimg/allimg/c63B0O.jpg"&&i&&/i&&/li&
&li data-src="/58pic/17/18/97/01U58PIC4Xr_1024.jpg"&&i&&/i&&/li&
&li data-src="http://cover./mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"&&i&&/i&&/li&
&li data-src="1.z0./71.jpg"&&i&&/i&&/li&
&li data-src="/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"&&i&&/i&&/li&
&li data-src="/00/16/18/bf3.jpg"&&i&&/i&&/li&
&li data-src="/upimg/allimg/c63B0O.jpg"&&i&&/i&&/li&
&li data-src="/58pic/17/18/97/01U58PIC4Xr_1024.jpg"&&i&&/i&&/li&
&li data-src="http://cover./mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"&&i&&/i&&/li&
&li data-src="1.z0./71.jpg"&&i&&/i&&/li&
&li data-src="/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"&&i&&/i&&/li&
&li data-src="/00/16/18/bf3.jpg"&&i&&/i&&/li&
&li data-src="/upimg/allimg/c63B0O.jpg"&&i&&/i&&/li&
&li data-src="/58pic/17/18/97/01U58PIC4Xr_1024.jpg"&&i&&/i&&/li&
&li data-src="http://cover./mfsv2/download/fdsc3/p015trgKM7vw/H0iyDPPneOVrA4.jpg!t"&&i&&/i&&/li&
&li data-src="1.z0./71.jpg"&&i&&/i&&/li&
&li data-src="/baike/pic/item/2f9cbdcc5e0bcf5c00e9283b.jpg"&&i&&/i&&/li&
&li data-src="/00/16/18/bf3.jpg"&&i&&/i&&/li&
&li data-src="/upimg/allimg/c63B0O.jpg"&&i&&/i&&/li&
/* 获取节点 */
var oUl = document.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
/* 创建img标签函数 */
function createImg(obj){
var src = '';
if(obj.dataset.src){
src = obj.dataset.
src = obj.getAttribute('data-src');
if(obj.children.length &= 1){
var img = document.createElement('img');
obj.appendChild(img);
/* 计算节点到文档顶部的距离 */
function getTop(obj){
var h = 0;
while(obj){
h += obj.offsetT
obj = obj.offsetP
/* 滚动实时计算所到区域并进行相关计算 */
window.onscroll = function(){
var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop);
for(var i=0;i&aLi.i++){
if(getTop(aLi[i]) & t){
setTimeout('createImg(aLi['+i+'])',500)
/* 页面加载完便执行一次滚动函数 */
window.onload = function(){
window.onscroll();
,建议在手机端观看}