DIY的JS延迟加载图片插件

最新推荐文章于 2024-11-07 09:23:06 发布

原创最新推荐文章于 2024-11-07 09:23:06 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#scroll #function #浏览器

Javascript/Jquery 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片懒加载技术。该技术通过在页面滚动时动态加载可见区域内的图片，有效提升了页面加载速度及用户体验。文章提供了具体的代码示例及下载链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在很多时候，我们的页面会显示大量的图片，若要等待所有图片都呈现出来则会影响页面的响应速度。今天共享一个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.youkuaiyun.com/source/3375576