JavaScript实现延迟加载与瀑布流加载效果

85 浏览量更新于2024-09-01 收藏 71KB PDF 举报

"这篇文章主要展示了如何使用JavaScript实现图片的延迟加载和瀑布流加载效果，这两种技术在网页设计中常用于优化用户体验，特别是处理大量图片时。文中提供的代码实例包括了一个带有加载进度条的延迟加载效果和一个根据滚动条位置预加载图片的瀑布流加载效果。" 在网页开发中，图片加载速度往往对用户体验产生重要影响，特别是在图片数量较多的场景下。延迟加载（Lazy Loading）和瀑布流加载（Infinite Scrolling）是两种有效的解决策略。 1. 延迟加载延迟加载的主要目的是在用户需要看到图片时才开始加载，而不是一次性加载所有图片，从而减少初始页面加载的时间。实现这个功能的关键在于使用`data-src`替代`src`属性存储图片的真实URL。在HTML中，给图片元素添加`class="lazy"`和`data-src`属性，如`<img class="lazy" data-src="..." />`。JavaScript代码会监听图片加载事件，当图片进入视口时，将`data-src`的值赋给`src`，并移除背景图（通常是加载动画）。同时，更新进度条以反映加载状态，如果加载失败，还需提供错误提示。 2. 瀑布流加载瀑布流加载主要用于创建类似Pinterest的布局，图片随着用户滚动页面而动态加载。实现这一效果的关键是检测滚动条的位置，当新图片进入可视区域时，预先加载这些图片。这通常通过监听滚动事件（scroll）和计算元素位置来实现。在用户无感知的情况下，图片被预加载，从而提供流畅的浏览体验。 HTML 结构示例： ```html <body> <div class="picList"> <img class="lazy" data-src="pic/compressed/picList1.jpg">  </div> <div id="loadBar">   </div> </body> ``` JavaScript 代码实例可能包括以下部分： - 获取所有图片元素，并绑定滚动事件监听器。 - 检查每个图片是否在视口内，如果是，则将其`data-src`替换到`src`，并启动加载过程。 - 更新进度条显示，确保用户能感知加载进度。 - 如果图片加载失败，显示错误信息。这两种技术结合使用，可以显著提升网页性能，尤其是在移动设备上，可以节省流量并提高页面响应速度。对于大型图片库或展示型网站来说，它们是不可或缺的优化手段。

js图片加载效果实例代码（延迟加载图片加载效果实例代码（延迟加载+瀑布流加载）瀑布流加载）

本篇文章主要介绍了js图片加载效果实例代码（延迟加载+瀑布流加载），非常具有实用价值，需要的朋友可以

参考下

主要做了两种图片加载的效果

一种是遇到页面图片比较多的时候，带读条效果的加载提示（为了验证正确加载，设置了1秒钟的加载间隔时间）

另外一种是根据滑块的位置进行图片的预加载，在用户不察觉的情况下，实现瀑布流的加载效果

一一延迟加载延迟加载

主要思路：

1. HTML的img标签中，将正确的地址存在data-src属性中，给所有图片设置一个转圈圈的loading图片作为background

2. js中，依次读取每一个img，将data-src中的地址替换到src中，去掉background

3. 每成功加载一张图片，进度条的百分比进行相应的变化。

4. 如果加载不成功，就提示图片加载错误。

HTML结构很简单，就是一个div.picList包裹了所有img，然后加上一个简单的进度条div#loadBar

<body>

</div>

</div>

</body>

css（使用的scss，编译时会自动加上各种兼容前缀）

.picList{

img{

width: 100px;

height: 100px;

position: relative;

/*加载失败时显示灰底文字*/

&:after{

content: "( ⊙ o ⊙ )加载失败";

font-size: 6px;

font-family: FontAwesome;

color: rgb(100, 100, 100);

display: flex;

justify-content: center;

align-items: center;

position: absolute;

top: 0;

left: 0;

width: 100px;

height: 100px;

background-color: #ddd;

}

.lazy{

background: url(../pic/loading.gif) center no-repeat;

border: 1px solid black;

}

#loadBar{

width: 200px;

height: 15px;

background: linear-gradient(90deg,#187103,#81b50b,#187103);

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38629976

粉丝: 7
资源: 971

JavaScript实现延迟加载与瀑布流加载效果

仿京东淘宝两列错位展示瀑布流代码基于masonry.zip

js页面图片延迟加载特效.zip

jquery响应式网站瀑布流布局带图片延迟无限滚动加载效果

jquery 瀑布流实例最流行瀑布流图片展示

vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)

瀑布流实例 附素材图片

HTML5+CSS3+JS小实例：自适应瀑布流布局

JS瀑布流实现方法实例分析

瀑布流加载模式样例

原生js页面滚动延迟加载图片

最新资源

瀑布流实例附素材图片