首页 >> 前端开发技术 >> 前端外包:什么是懒加载web技术?
前端外包:什么是懒加载web技术?
发布时间: 2018年6月26日 | 浏览:
| 分类:前端开发技术
懒加载技术 可以减少图片对服务器的一次性请求,做到按需加载,提升用户体验。比较代表性的解决方案有 lazyload.js ,比较主流了,在2012年左右都已经有了,不是什么秘密。
使用方法
引用jquery和jquery.lazyload.js到你的页面
<script src=”jquery.js”></script>
<script src=”jquery.lazyload.js?v=1.9.1″></script>
html图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original
<img data-original=”img/bmw_m1_hood.jpg”>
<img data-original=”img/bmw_m1_side.jpg”>
<img data-original=”img/viper_1.jpg”>
<img data-original=”img/viper_corner.jpg”>
<img data-original=”img/bmw_m3_gt.jpg”>
<img data-original=”img/corvette_pitstop.jpg”>
js出始化lazyload并设置图片显示方式
<script type=”text/javascript” charset=”utf-8″>
$(function() {
$(“img.lazy”).lazyload({effect: “fadeIn”});
});
</script>
lazyload.js对服务器占一点点资源,但是可以对服务器的请求或者网站的性能都有很高的提升,是非常划算的。我们常年致力于web前端外包,以及网站性能、用户体验的研究,非常青睐这样的效果。
上一条:« 联系我们