关于延迟加载的方法总结
针对大量图片的网页或结构很长很复杂的网页加载完成往往很慢,导致页面渲染很慢,用户等待的时间过长,为了提高用户体验,往往采用优先加载第一屏的内容,后续的采用延迟加载的方式。本人总结了如下方法有:
}) //设置表现形式
1、采用lazyload插件
在头部引入jq公共库与<script type="text/javascript" src="jquery.lazyload.js"></script>
js:
$('img').lazyload({
effect:'fadeIn'}) //设置表现形式
更多参考:http://www.rainleaves.com/html/1248.html
2.采用图片代替法。用一张图片填充等dom加载完后再取得真正的图片来填充
<img src="img/11.png" width="190" height="150" reimg="img/1.jpg">
<img src="img/11.png" width="190" height="150" reimg="img/2.jpg">
<img src="img/11.png" width="190" height="150" reimg="img/3.jpg">
<img src="img/11.png" width="190" height="150" reimg="img/2.jpg">
<img src="img/11.png" width="190" height="150" reimg="img/3.jpg">
js:
window.onload = function() {//把真的图片替换图片
$('img').each(function(){
var reimg = $(this).attr('reimg');
$(this).attr('src',reimg);
})
}
3.对于dom结构繁琐的,采用textarea形式。因为浏览器不会渲染textarea里面的内容,等其他的dom和其他图片等加载完后再把里面的内容取出来填充
<div id="two"></div><textarea id="temp" type="hidden"><li><img src="img/7.jpg" width="490" height="250"></li><li><img src="img/8.jpg" width="490" height="250"></li></textarea>
js:
window.onload = function() {
var la_html = $('#temp').val();
$('#two').html(la_html);
}
注:以上方法仅此是对浏览器上使得页面表现形式上改善,并不能减轻服务器的负荷,如果想减轻服务器的负荷可以结合java异步加载的方式来实现。