动态加载图片代码

2016-07-07 15:00 来源：www.chinab4c.com 作者：ecshop专家

最近我的ecshop网站遇到一个问题，图片被美工处理的很大， 一个150PX宽的图片竟然有20K。这样下来一个首页就要有3M左右，对于一个家庭带宽2M 的用户来讲，即使全部的网速都用来打开网站也要15秒左右，这对于用户体验是很不友好的。
这样一来就要采用一种措施，尽量的减少第一次打开页面的时候加载图片的数量。
研究了一下京东商城和淘宝网，找到了一种解决的办法，大致的原理是修改源代码中的img 中的 src 名称， 通过JS 绑定窗口事件，在触发之后替换img标签里的 src 图片路径名称。 找到下面代码中红色部分，仔细比对即可使用。
提示：应用于正式环境之前要测试代码的有效性，如有疑问，欢迎留言咨询。
  1. <script>
  2. imgLoad();
  3. window.**croll = function(){ imgLoad(); }

  5. function pageTop()
  6. {
  7. return document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  8. }

  10. function imgLoad()
  11. {
  12. var img = document.images;
  13. for(var i=0; i< img.length; i++)
  14. {
  15. var o = img[i];
  16. var vtop = getPosition(o).top;
  17. var gggggggg = o.gggggggg;
  18. gggggggg = o.getAttribute(‘gggggggg‘);
  19. var src = o.src;
  20. src = o.getAttribute(‘src’);
  21. if (vtop <= pageTop())
  22. {
  23. if(!src)
  24. {
  25. o.src = gggggggg;
  26. o.setAttribute(‘src’, gggggggg);
  27. }
  28. }
  29. }
  30. }
  31. </script>

  33. <img src=”http://www.22222222222.com/> 将src替换为gggggggg。或者想要替换的其他名字

  35. 替换后代码效果<img gggggggg=”http://www.22222222222.com/>
复制代码


演示网站：www.zunbaowang.com

回答：
真的很不错

忘了告诉大家，JS 一定要放在 页面的底部，因为要判断img是否为当前窗口！

的确很不错

的确很不错

具体怎么使用呢

不知道如何使用？

很好还强大

放到那个JS里呢?

很好很强大，收藏

很好
茶叶网，茶叶团购网，满分团购导航

不错................

看不明白该怎么处理？

很好很强大，感谢LZ分享

化妆品牌