DIY的JS延迟加载图片插件

最新推荐文章于 2021-10-25 11:33:26 发布

程序员kenny

最新推荐文章于 2021-10-25 11:33:26 发布

阅读量1.8k

点赞数

分类专栏： Javascript/Jquery 文章标签： scroll function 浏览器

本文链接：https://blog.csdn.net/kenny0613/article/details/6553695

版权

Javascript/Jquery 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

如果页面中存在图片，如：<body> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> <img originalsrc="图片路径" /> …… </body>

具体JS调用代码如下： $(function () { $("img").delayLoading({ defaultImg: "Loading.png", // 预加载前显示的图片 errorImg: "", // 读取图片错误时替换图片(默认：与defaultImg一样) imgSrcAttr: "originalSrc", // 记录图片路径的属性(默认：originalSrc，页面img的src属性也要替换为originalSrc) beforehand: 0, // 预先提前多少像素加载图片(默认：0) event: "scroll", // 触发加载图片事件(默认：scroll) duration: "normal", // 三种预定淡出(入)速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000),默认:"normal" container: window, // 对象加载的位置容器(默认：window) success: function (imgObj) { }, // 加载图片成功后的回调函数(默认：不执行任何操作) error: function (imgObj) { } // 加载图片失败后的回调函数(默认：不执行任何操作) }); });

实例下载地址：http://download.csdn.net/source/3375576

程序员kenny

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
DIY的JS延迟加载图片插件

在很多时候，我们的页面会显示大量的图片，若要等待所有图片都呈现出来则会影响页面的响应速度。今天共享一个DIY的利用JS来延迟加载图片的插件。大概的实现方式是：页面的定义元素img时，将src统一替换成自定义的一个属性名，如叫“originalSrc”，然后利用JS把给img的src设置为一个定义好的等待图片，然后在scroll事件触发时，把img元素位置正好在浏览器
复制链接

扫一扫