延迟加载外部js文件,延迟加载图片(jquery.lazyload.js和echo,js)

时间:2023-03-22 20:05:13

js里一说到延迟加载,大都离不开两种情形,即外部Js文件的延迟加载,以及网页图片的延迟加载:

1.首先简单说一下js文件的3种延迟加载方式:

(1)<script type=”text/javascript” defer>,defer属性可以推迟对脚本的解释,直到文档已经显示给用户为止,但只有IE支持defer属性

(2)设置具体的延迟时间,对应的js代码如下:

function loadScript(){
var myScript=document.createElement("script");
myScript.src="dafu.js";
document.body.appendChild(myScript);
}
setTimeout(function(){
loadScript();
},1000)

(3)采用js监听,直到文档加载完才会加载指定的外部js文件,对应的js代码如下:

if (window.addEventListener){
window.addEventListener("load", loadScript, false);
}else if (window.attachEvent){
window.attachEvent("onload", loadScript);
}else {
window.onload = loadScript;
}

2.接下来针对图片的延迟加载,说一下自己用过的两款不错的插件:

(1)基于jquery类库的jquery.lazyload.js(1.9+),废话不多说,直接上代码,先上布局:

<div class="demo" style="width: 736px; margin:1000px auto;">
<img class="lazy" src="data:images/blank.gif" data-original="images/big-1.jpg">
<img class="lazy" src="data:images/blank.gif" data-original="images/big-2.jpg">
<img class="lazy" src="data:images/blank.gif" data-original="images/big-3.jpg">
<img class="lazy" src="data:images/blank.gif" data-original="images/big-4.jpg">
<img class="lazy" src="data:images/blank.gif" data-original="images/big-5.jpg">
<img class="lazy" src="data:images/blank.gif" data-original="images/big-6.jpg">
<img class="lazy" src="data:images/blank.gif" data-original="images/big-7.jpg">
</div>

注意,css样式里面我是给的.demo img { width: 100%; height: 490px;},这样给图片添加width和height属性有助于在图片未加载时占满所需要的空间;另外,在src属性中设置占位图片,例如1x1像素的灰色图片或者loading的gift动图,然后在data-original中设置真实的图片URL,当然src中设置嫌麻烦可以去实例化的参数设置中写。

然后就是js部分的代码:

$("img").lazyload({
placeholder:"images/loading.gif", //设定一个占位图片,待图片加载时,占位图则会隐藏,优先调用标签行内属性src对应的占位图
data_attribute:"original", //真实图片地址的data属性后缀,默认为original
effect:"fadeIn", //默认地使用show()方法来将图显示出来,还可以使用其他特效(fadeIn,slideDown)来处理
threshold:40, //默认情况下图片会出现在屏幕时加载,threshold可令图片在距离屏幕多少像素时提前加载,做到不让用户察觉
effectspeed:500,//作为effect的参数使用表示动画时间,默认为undefined
// event:"click", //默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置才开始加载图片,这里可以设置成某个事件触发加载(click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…))
// container: $("#container"), //默认在拉动浏览器滚动条时生效,这里可以将插件用在可滚动容器的图片上
failure_limit:10, //默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题
// skip_invisible:false //默认忽略了隐藏图片. 将skip_invisible设为false加载隐藏图片
//图片加载时的事件,有 2 个参数:elements_left(未加载的图片数量)、settings(lazyload的参数)
appear: function(num,setting){
console.log("一开始还剩"+num+"张未加载")
},
//图片加载后的事件,有2个参数,同appear
load: function(num,setting){
console.log("接着还剩"+num+"张未加载")
}
});
//页面加载完成5秒后, 指定区域内的图片会自动进行加载
$(window).on("load", function() {
setTimeout(function() {$("img").trigger("click")}, 5000);
});
//监听每张图片加载完毕
$("img").on("load",function(){
console.log("刚加载的这张图片的下标是"+$(this).index());
})

大部分功能都能实现,感觉不太好的就是不能直接给图片设置明确的延迟加载时间,详细介绍请移步http://code.ciaoca.com/jquery/lazyload/

(2)轻量级插件echo.js,脱离jquery类库,还能直接设置明确的延迟加载时间,html部分的代码和上面有一些类似:

<div class="demo" style="width: 736px; margin:1000px auto;">
<img class="lazy" src="data:images/blank.gif" data-echo="images/big-1.jpg">
<img class="lazy" src="data:images/blank.gif" data-echo="images/big-2.jpg">
<img class="lazy" src="data:images/blank.gif" data-echo="images/big-3.jpg">
<img class="lazy" src="data:images/blank.gif" data-echo="images/big-4.jpg">
<img class="lazy" src="data:images/blank.gif" data-echo="images/big-5.jpg">
<img class="lazy" src="data:images/blank.gif" data-echo="images/big-6.jpg">
<img class="lazy" src="data:images/blank.gif" data-echo="images/big-7.jpg">
</div>

注意:如果直接自定义一张占位图片,可能会造成图片的变形等,这里可以先准备一张1*1px透明gif图片(blank.gif),然后用一个loading图片作背景,即.demo img { width: 100%; height: 490px; background: url(images/loading.gif) no-repeat 50%;}

然后直接上js部分的代码:

//实例化echo
echo.init({
offset:0,//设置上下左右距离viewport到多少就开始加载图片,默认为0,即只加载出现在可视区中的图片,参数取值越大,加载的图片就会越多
// offsetVertical:40,//垂直方向距离viewport多少就开始加载图片,默认值为0
// offsetHorizontal:0,//水平方向距离viewport多少就开始加载图片,默认值为0
// offsetTop:0, //顶部方向距离viewport多少就开始加载图片,默认值为offsetVertical
// offsetButton:0, //底部方向距离viewport多少就开始加载图片,默认值为offsetVertical
// offsetLeft:0, //左边方向距离viewport多少就开始加载图片,默认值为offsetHorizontal
// offsetRight:0, //右边方向距离viewport多少就开始加载图片,默认值为ooffsetHorizontal
throttle:1000,//设置图片延迟加载时间
callback: function (element, op) {
if(op === 'load') {
element.classList.add('loaded');
} else {
element.classList.remove('loaded');
}
console.log(element, 'has been', op + 'ed')//传递已更新的元素和操作(load或者unload)
},
unload:false//默认为false,即当图片滑动超过了viewport的时候不在加载已经加载过的图片
});
//监听每张图片加载完毕
$("img").on("load",function(){
console.log($(this).index());
})

主要功能都测试过,没有明显的问题,还有个echo.reader()的方法没怎么用到,有兴趣的码友可以去试一下~