码迷,mamicode.com
首页 > 其他好文 > 详细

图片懒加载(延迟加载)原理及实现

时间:2016-03-16 17:01:45      阅读:179      评论:0      收藏:0      [点我收藏+]

标签:

作为一个小前端,还有很多概念或者是技术我们不清楚,那么,我们能做的就是多多实践,最佳实践就是去看看那些流量大的网站怎么做的啦~哈哈

经常听别个说懒加载、懒加载,作为一名有上进心的程序媛,上网扒了拔,轻松get到概念了,废话不多说,进入正题:

 

为了减少流量,提升网站性能,图片展示型网站会采用懒加载。一般第一屏的图片直接显示,从第二屏开始采用懒加载。

通常的做法是在对<img>标签的src属性放占位图片的地址,而真实的图片地址放在img标签的某个属性中,如data-img或original之类的。

就像这样:<img data-img="真实地址" src="占位图片地址" >

鼠标滚动时判断待加载资源到可视区域顶端的距离,如小于屏幕高度,把data-img的值赋给src,然后去掉data-img属性。

 

路漫漫其修远兮,我将上下而求索~写代码不能马虎啊

图片懒加载(延迟加载)原理及实现

标签:

原文地址:http://www.cnblogs.com/rellame/p/5283980.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!