JS里面的懒加载(lazyload)

前端之家收集整理的这篇文章主要介绍了JS里面的懒加载(lazyload)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

  懒加载技术(简称lazyload)并不是新技术,它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载

  涉及到图片,falsh资源,iframe,网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源,让用户等待太久,

  来,举个栗子,当你去东哥的绿帽网网购的时候,打开首页的时候,直接在导航栏选了商品种类跳转到了列表页,那首页下方那些未显示的区域的图片需不需要加载,当然不需要了,你根本没看他们,加载出来干啥

  说白了就是占着茅坑不拉粑粑,那我们怎么解决呢,这时我们就该用到懒加载技术,只有当这部分图片出现在可视区内再去请求服务器。

  懒加载的核心:用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)

代码例子呈上来

页面渲染时将src路径放到自定义属性中去,这样页面加载时图片就不会去请求服务器,当图片滚动到可视区内时,获取它的自定义属性并赋值给src

页面的布局,图片路径注意改一下子

Meta Document

  来 上关键的JS代码

猜你在找的JavaScript相关文章