DIY的JS延迟加载图片的插件

时间:2014-07-08 11:08:32
【文件属性】:

文件名称:DIY的JS延迟加载图片的插件

文件大小:67KB

文件格式:RAR

更新时间:2014-07-08 11:08:32

JS javascript 延迟加载 插件 重载

在很多时候,我们的页面会显示大量的图片,若要等待所有图片都呈现出来则会影响页面的响应速度。今天共享一个DIY的利用JS来延迟加载图片的插件。 大概的实现方式是:页面的定义元素img时,将src统一替换成自定义的一个属性名,如叫“originalSrc”,然后利用JS把给img的src设置为一个定义好的等待图片,然后在scroll事件触发时,把img元素位置正好在浏览器显示范围内把“originalSrc”属性值赋予"src",然后移除“originalSrc”属性。 原来是打算不破坏页面元素结构风格,不添加“originalSrc”属性,直接通过面页加载时,通过JS将img的src替换成originalSrc,可是那样的话就不能真正达到延迟加载的效果。因为在页面必竟在加载时还是加载了图片部分,然后停上。所以该方法从总体上看还是做不够,最后决定还是在页面元素img里加上“originalSrc”属性如:


【文件预览】:
延迟加载图片
----Loading.png(5KB)
----jquery-1.6.js(227KB)
----lyz.delayLoading.min.js(2KB)
----HTMLPage.htm(5KB)

网友评论

  • 还不错,虽然网上延迟加载的挺多的额
  • 感觉不是很好,现在用lazyload方便多了。
  • 还不错,可以用啊
  • 这个确实非常好用!
  • 非常好,谢谢
  • 经过测试,还是一个很不错的demo,值得学习噢
  • 终于明白了这个思想是什么了
  • 好东西,学了不少,里面很多东西写的还是可以的
  • 一般 我感觉不是很好