图片延迟加载实现原理

  • A+
所属分类:JavaScript

随着页面信息越来越丰富饱满,尤其像淘宝,京东之类的购物网站,首页就是他们的生命线,- -||||

最近在做某银行的网站,只有挤上首页才能得到更多的关注,于是乎各种业务人员就开始了首页位置之争,为了平息他们的战乱。体现我大度包容的一面 ,啊哈哈哈

首页囊括了他们全部的需求,他们满意的走人了,结果技术经理来了,说首页加载怎么这么大,于是乎,减!!!

首当其冲,缩小图片K数,不够,那怎么办,好吧,进入正题。长页面未显示的部分可以先不加载,省流量就是省钱,开搞!!!

思路就是,判断图片在页面中的位置,如果图片的位置大于小于当前的屏幕高度,那么显示图片,否则隐藏图片。

怎么一开始隐藏图片呢,很简单,<img csii_src="1.png" alt="图片延迟加载实现原理">,给一个浏览器不认识的属性csii_src,当需要显示图片的时候在element.src=element.getAttribute("csii_src");,思路很简单吧,上代码了。

 

 

weinxin
我的微信公众号
我的微信公众号扫一扫

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: