延时加载
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了延时加载相关的知识，希望对你有一定的参考价值。
一、为什么使用延迟加载技术：
1 避免浪费带宽 节约流量
2 减轻服务器的压力 带来更好的用户体验
当页面内图片达到一定的数量,页面的加载速度就越来越差.
我们并不需要把所有图片一次性加载完,而且,用户也不会一次性把所有图片看完.
所以,我们需要做的就是按需加载,只显示用户需要看的图片
图片惰性延迟加载好处
1. 按需加载图片,加快加载页面速度
2. 减少对服务器的请求数
3. 减少初始页面加载页面大小
图片惰性延迟加载坏处
1. SEO,因为图片都被替换成假的图片,所以会影响图片的收录,所以这功能不建议在详情页使用
未加图片惰性加载功能:
图片惰性延迟性能对比
已加图片惰性加载功能:
二、原理
随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。
三、使用方法
只需要在图片上这样写：
<img class="lazy" data-original="img/example.jpg" >
【 如果此处不使用class 可在初始化时使用：
$("img").lazyload({effect: "fadeIn"});
初始化设置：
<script type="text/javascript" charset="utf-8">
$(function() {
$("img.lazy").lazyload({effect: "fadeIn"});
});
</script> 】
然后用一段js
$(function() {
$("img.lazy").lazyload();
});
需要引用的插件：
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js"></script>
参数设置
$("img.lazy").lazyload({
placeholder : "img/grey.gif", //用图片提前占位
effect: "fadeIn", // 载入使用淡入效果；
threshold: 200, // 滚动条在离目标位置还有200的高度时就开始加载图片；
event: ‘click‘, // 事件触发时才加载 有:值有click(点击),mouseover(鼠标划过)等；
container: $("#container"), // 对某容器中的图片实现效果；值为某容器 如window；
failurelimit : 10 // 图片排序混乱时， 值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当html容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
附：
1.背景图片的延迟加载
背景图延迟加载的用法和图片延时加载的用法很相似，首先，你需要使用背景的元素需要这样写：
<div class="lazy" data-original="img/example.jpg" ></div>
然后用一段js
$(function() {
$("div.lazy").lazyload();
});
详见：http://www.webhek.com/background-image-lazy-load/
http://www.jq22.com/jquery-info390
2.浏览器兼容性：
适应 火狐 谷歌 safari ie 6~11
3.含有轮播效果的延迟加载？
=====================================
参考链接http://www.itnose.net/detail/6633575.html
====================================
(function( $ ){
$.fn.imglazyload = function( options ){
var o = $.extend({
attr : ‘lazy-src‘,
container : window,
event : ‘scroll‘,
fadeIn : false,
threshold : 0,
vertical : true
}, options ),
event = o.event,
vertical = o.vertical,
container = $( o.container ),
threshold = o.threshold,
// 将jQuery对象转换成DOM数组便于操作
elems = $.makeArray( $(this) ),
dataName = ‘imglazyload_offset‘,
OFFSET = vertical ? ‘top‘ : ‘left‘,
SCROLL = vertical ? ‘scrollTop‘ : ‘scrollLeft‘,
winSize = vertical ? container.height() : container.width(),
scrollCoord = container[ SCROLL ](),
docSize = winSize + scrollCoord;
// 延迟加载的触发器
var trigger = {
init : function( coord ){
return coord >= scrollCoord &&
coord <= ( docSize + threshold );
},
scroll : function( coord ){
var scrollCoord = container[ SCROLL ]();
return coord >= scrollCoord &&
coord <= ( winSize + scrollCoord + threshold );
},
resize : function( coord ){
var scrollCoord = container[ SCROLL ](),
winSize = vertical ?
container.height() :
container.width();
return coord >= scrollCoord &&
coord <= ( winSize + scrollCoord + threshold );
}
};
var loader = function( triggerElem, event ){
var i = 0,
isCustom = false,
isTrigger, coord, elem, $elem, lazySrc;
// 自定义事件只要触发即可，无需再判断
if( event ){
if( event !== ‘scroll‘ && event !== ‘resize‘ ){
isCustom = true;
}
}
else{
event = ‘init‘;
}
for( ; i < elems.length; i++ ){
isTrigger = false;
elem = elems[i];
$elem = $( elem );
lazySrc = $elem.attr( o.attr );
if( !lazySrc || elem.src === lazySrc ){
continue;
}
// 先从缓存获取offset值，缓存中没有才获取计算值,
// 将计算值缓存，避免重复获取引起的reflow
coord = $elem.data( dataName );
if( coord === undefined ){
coord = $elem.offset()[ OFFSET ];
$elem.data( dataName, coord );
}
isTrigger = isCustom || trigger[ event ]( coord );
if( isTrigger ){
// 加载图片
elem.src = lazySrc;
if( o.fadeIn ){
$elem.hide().fadeIn();
}
// 移除缓存
$elem.removeData( dataName );
// 从DOM数组中移除该DOM
elems.splice( i--, 1 );
}
}
// 所有的图片加载完后卸载触发事件
if( !elems.length ){
if( triggerElem ){
triggerElem.unbind( event, fire );
}
else{
container.unbind( o.event, fire );
}
$( window ).unbind( ‘resize‘, fire );
elems = null;
}
};
var fire = function( e ){
loader( $(this), e.type );
};
// 绑定事件
container = event === ‘scroll‘ ? container : $( this );
container.bind( event, fire );
$( window ).bind( ‘resize‘, fire );
// 初始化
loader();
return this;
};
})( jQuery );
============================
以上是关于延时加载的主要内容，如果未能解决你的问题，请参考以下文章