郑州网站建设-选河南蓝腾科技,您身边值得信赖的郑州网站建设公司。

  • 郑州网站建设-专业源于专注
  • 郑州网站建设-专注服务项目
  • 郑州网站建设-网络营销推广
  • 郑州网站建设-选择蓝腾

建网站时如何实现图片延迟加载?

2015/3/25 10:46:29 0人评论 1836次浏览 分类:常见问题 来源:www.371wangluo.com

        在进行给客户建网站的过程中,郑州网站建设发现很多客户希望在首页加载大量的图片和特效,从而给客户一种网站很“炫”的感觉,但是这样做不仅会影响到网站的打开速度,而且从网站优化的角度来说也大为不利,那么有没有什么方法可以解决图片加载的问题呢?

        这就需要用到我们本文所说的图片延迟加载的技术了,图片延迟加载也称懒加载,只显示可视区域的图片,当页面滚动的时候,图片进入了可视区域再进行加载,这样可以显著的提高页面的加载速度,通常应用于图片比较多的网页,如果一个页面图片比较多,且页面高度或宽度有好几屏,页面初次加载时,更少的图片并发请求数也可以减轻服务器的压力。

        那么具体应该如何实现呢?

        

        图片延迟加载的原理比较简单,先将图片的真实地址缓存在一个自定义的属性(lazy-src)中,而src地址使用一个1×1的全透明的占位图片来代替,当然占位图片也可以是其他的图片。

网站建设图片延时加载

        因为是使用javascript来加载图片,如果用户禁用了javascript,可以设置一个替代的方案。

网站建设图片延迟加载处理

        页面初次加载时获取图片在页面中的位置并缓存(每次取offset的值会引发页面的reflow),计算出可视区域,当图片的位置出现在可视区域中,将src的值替换成真实的地址,此时图片就开始加载了。

        当页面滚动的时候,再判断图片已经缓存的位置值是否出现在可视区域内,进行替换src加载。当所有的图片都加载完之后,将相应的触发事件卸载,避免重复操作引起的内存泄漏。将整个窗口看成是一个大容器,那么也可以在页面中设置一个小容器,在小容器中也同样可以实现图片的延迟加载。

        本文转载自:图片延迟加载的实现更多细节请查看原文。


本文出自 郑州网站建设 : http://www.371wangluo.com/news/show-253.html 转载请注明出处。

河南郑州网站推广
河南郑州网站建设
河南郑州网站建设
河南郑州网站建设
地址:郑州市金水区农业路16号省汇中心 电话:0371-53661766 传真:0371-53661766
联系人:安经理 业务专线:15136282848 邮箱:lantentech@163.com QQ:2557787088
河南蓝腾计算机科技有限公司 版权所有
友情链接: 洛阳网站建设   郑州SEO   郑州高端网站建设   郑州做网站公司   郑州网站托管   昆明seo   安阳网站建设   洛阳做网站   郑州网站优化   郑州专业网站建设   郑州网站制作   织梦模板   深圳网站优化   西安网站优化   长春seo   网站优化   兰州网站建设   建站宝盒   深圳网站建设   韩国服务器租用   影楼网站建设   郑州网站建设公司