图片延迟加载代码和使用方法分享大家

nxdawei · 发表于 2012-7-6 19:42:26

本帖最后由风乱流年于 2012-9-18 15:41 编辑

我们用的VPS或者云主机大多是1M-5M的带宽，可有时候单页图片太多了，在访问量大的情况下，会随时导致带宽到5M峰值。
这种情况下，最好的办法就是对图片做延迟加载，这样一来不仅访客打开网页快，而且对咋们的云主机带宽也起到很好的协调作用，不至于瞬间高带宽占用。

网上很多延迟加载代码都是浏览器显示到某个位置的时候才开始加载，这样体验很不爽。我对代码做了些优化，
优化后的代码是：即将浏览到的时候就开始加载，等浏览到的时候已经完全显示出来了，访客甚至感觉不到用了图片延迟加载，用户体验相当好！而且js代码还很少，只有2KB。
效果演示：http://fx.dt23.com/img/a/yanchi.htm

现在分享给DZ的朋友们，使用方法非常的简单哦！

1、下载本帖中的附件js代码
2、将js上传到空间
3、调用js，如<script src="img/delayload.js"></script>
4、将需要做延迟加载的图片代码的src属性改为mce_src
如
<img src="img/fj/block/4b/42f5a6.jpg" width="120" height="120"/>
改为
<img mce_src="img/fj/block/4b/42f5a6.jpg" width="120" height="120"/>
然后保存，该更新缓存的更新缓存。

接下来就开始享受延迟加载带来的好处吧

reghtml1 · 发表于 2012-7-6 19:54:55

提示: 作者被禁止或删除内容自动屏蔽

小森我爱你 · 发表于 2012-7-6 20:37:01

但图片会明显变的很难看。

yahooren1 · 发表于 2012-7-6 23:08:09

每个图片都要这样改吗？

互乐 · 发表于 2012-9-18 13:37:49

加载不错的.

梦想！ · 发表于 2012-9-18 17:48:00

{:soso_e165:} 加载不错的.

A35747417 · 发表于 2013-10-1 08:32:17

你好，有几个地方没看懂
1、将js上传到空间：是上传到什么位置呢？是static/js/这个位置下吗？
2，调用js，这个命令是写在哪个文件哪个位置？
3，<img src="img/fj/block/4b/42f5a6.jpg" width="120" height="120"/>这个代码是在哪个文件里？

		自动登录	找回密码
密码			立即注册

[修改] 图片延迟加载代码和使用方法分享大家

本帖子中包含更多资源