图片延迟加载

欢迎来到 jackNEss'窝窝
I like simple mind
  • 图片延迟加载

    2011年10月18日

    图片延迟加载

    鉴于之前写的一个图片延迟加载api 在项目中应用起来改动量太大(要把全部应用到图片延迟加载的 src 统一改成 lazy_src要惊动多个部门呢..技术部,运营部等),于是乎就诞生了这个 lazy_onload 的优化版了,无需改动原有代码即可实现图片延迟加载。

    工作原理

    在 需要应用图片延迟加载的页面最底部运行(不能丢进window.onload里面,因为window.onload是等网页完全加载完成的时候才调用的,当然也包括图片的加载喇…),运行后,给需要图片延迟加载的对象 添加一个 lazy_src 属性,并将 原有的 src 的值 存放进去,而 src 则替换成一张 透明gif图(这是因为,经过测试,chrome,opera,safari当图片设置了带有图片地址的 src地址的时候,再把src地址改为空是不行的,图片继续进行加载 无视你的空值,所以得给个图片他去load而不能直接把src设为空值),然后就是每当触发 window.onscroll 和 window.onresize 的时候 循环检测所有图片,当图片出现在可视区域范围内时,就把 lazy_src 的值 赋值到 src,让图片进行加载。当全部图片都加载完之后,撤掉事件。

    演示地址: http://www.jackness.org/lab/object/lazy_onloadV2/demo.html

    阅读全文…

  • 浅谈图片延迟加载技术

    2011年09月10日

    浅谈图片延迟加载技术

    图片延迟加载技术,顾名思义,就是让图片晚一步地进行加载,从而加快网页的加载速度,这种技术尤其在访问 一些图片较多 或者 页面较长 的页面 如各种商城,效果较为显著。这种技术已在各大团购网站,商城网站之中应用如 淘宝网

    工作原理

    在第一次加载网页的时候,网页上面的图片先不加载,当你通过滚动条把页面滚动到我们浏览器的可视区域时,当前可视区域的图片才即时加载的,这样页面在浏览的过程中只加载可视区域的图片,而其它飞可视区域的图片则不加载,从而加快了页面加载的速度,对于比较长的页面和一些图片较多的站点来说,这个方案尤其合适。

    阅读全文…

标签云

分类目录

最新留言

  • 评论加载中...

与我联系

如有疑问or建议可通过以下方式跟我取得联系.

Q Q:373435871
Email:jackness1208@gmail.com
© Copyright 2011 - 2014 jackNEss.org All Rights Reserved 粤ICP备14065612号
首页 | 关于我 | 网站地图 | RSS