如果一个网页很长并且有很多图片的话，下载图片就需要很多时间，那么就会影响整个网页的加载速度，而这款延迟加载插件，会通过你的滚动情况来加载你需要看的图片，然后它才会从后台请求下载图片，最后显示出来。通过这个插件，可以在需要显示图片的时候，才下载图片，从而可以减少服务器的压力，提高页面加载速度。
Lazy Load 插件原理
修改目标img元素的src属性为orginal属性，从而中断图片的加载。检测滚动状态，然后把网页可视区域中的img的src属性还原然后加载图片，从而制造了一种缓冲加载的效果。代码引入方法：
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(document).ready(
function($){
$("img").lazyload({
placeholder : "images/grey.gif", //加载图片前的占位图片
effect : "fadeIn" //加载图片使用的效果(淡入)
});
});
</script>
但是现在，很多Javascript大牛分析得出，这个插件其实并没有真正的起到缓加载的作用。确实是这样，官方也已经给出了说明和解决方法了。
其实原因就在于在新版的浏览器中，即使我们删除了Javascript控制的src属性，浏览器仍然会去加载这个图像。
那么我们该怎么解决呢？其实也很简单，需要直接修改HTML的结构，在img标签中添加新的属性，把src属性的值指向占位图片，添加data-original属性，让其指向真正的图像地址。比如：
<img src="img/grey.gif" data-original="img/example.jpg" >
当然，在上面的代码中我们把页面内的所有图片都延迟加载了，但有些时候我们并不希望这样，因为有些图片并不想然他们延迟加载，那么我们可以这样只需做：
如只缓冲加载类main下的图像
$(".main img").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
加载挂载有lazy类的图像：
$("img.lazy").lazyload({
placeholder : "images/grey.gif",
effect : "fadeIn"
});
其他的以此类推，适当做一下选择器调整就行了。
lazyload.js 高级使用方法：
下面部分来自官方文档，将官方文档进行了一下简单的翻译。
更周全的做法
我们不得不思考这样一个问题。我们定义了这样一个结构，那么网页中，就不会加载源图像了。只有当 Javascript 执行，才会显示这个源图像。如果用户的浏览器不支持或者用户关掉了支持 Javascript 的选项，那么我们的这个图像就无法显示出来。也就是说，如果没有 Javascript 的支持，我们的图像就无法显示出来。
应对这个问题，我们需要引入noscript 标签。大体思路如下：用 noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。
<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>
对现有图像，隐藏处理，使用 show()方法触发显示。
.lazy {
display: none;
}
这样，如果浏览器不支持 Javascript，我们自定义的 img 就不会出现，而显示 noscript 里面的图像。具体实现代码如下：
$("img.lazy").show().lazyload();
提前加载
默认的情况是，当你滚动到图片位置的时候，插件开始加载。这样，用户可能首先看到的是一个空白图像，然后再缓慢出现。如果你想在用户滚动之前，提前加载这个图像，你可以配置一下参数。
$("img.lazy").lazyload({
threshold : 200
});
threshold 这个参数，就是用来提前加载的。上面这个语句的意思是，当距离图片还有200像素的时候，就开始加载图片。
自定义触发事件
默认的触发事件，是滚动，当你滚动的时候，就会检查然后加载。你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。
$("img.lazy").lazyload({
event : "click"
});
自定义显示效果
默认的图片实现效果，就是没有效果，下载完成之后，直接显示出来。这样的用户体验并不好，你可以设置effect属性，来控制显示图片的效果。例如
$("img.lazy").lazyload({
effect : "fadeIn"
});
fadeIn的效果就是，改变图片的透明度，渐现的方式出现。
把图像插入某个容器
大家如果使用智能手机的话，经常去应用网站下载应用，他们通常使用一个横着的容器，放一些手机截图。使用container属性，能很轻松在容器中实现缓冲加载。首先，我们需要用css定义这个容器，然后用这个插件进行加载。
#container { height: 600px; overflow: scroll; }
$("img.lazy").lazyload({
container: $("#container")
});
加载不可见图像
有部分图像是不可见的，我们对其加上类似 display:none;等属性的图像。默认的情况下，这个插件是不会加载隐藏的不可见图像。如果我们需要用它加载不可见图像，我们需要将 skip_invisible设置为false，代码如下：
$("img.lazy").lazyload({
skip_invisible : false
});
好了，这就是lazyload.js这款插件的简单介绍了。
-------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-1.8.1.min.js"></script>
<script src="js/lazyload.js"></script>
<script type="text/javascript">
$(function () {
$("img").lazyload();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<th>图片
</th>
</tr>
<asp:Repeater ID="rpt" runat="server">
<ItemTemplate>
<tr>
<td>
<img src="/Content/images/grey.gif" original="http://192.168.1.102/image/<%#Eval("rul") %>" onerror="this.src='/Content/images/grey.gif';" />
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</div>
</form>
</body>
</html>
相关推荐
图片异步延迟加载，也称为懒加载（Lazy Loading），是一...综上所述，`lazyload.js`是一个强大的工具，可以帮助我们实现高效的图片异步延迟加载，提高网页性能。通过合理配置和使用，可以为用户提供更流畅的浏览体验。
4. **异步加载**：结合其他技术如 Webpack 或者 LazySizes 等，实现更高级别的异步加载优化。 **四、常见问题与解决方案** 1. **图片未加载**：检查图片路径是否正确，占位符是否已设置，以及 LazyLoad 是否正确...
2. **异步加载**：如果图片是从服务器动态获取，需要考虑异步加载的情况，确保图片加载完成后能被 LazyLoad 正确处理。 3. **SEO**：延迟加载可能会影响搜索引擎的抓取，需确保在 HTML 中保留完整 `src` 属性供爬虫...
在本文中，我们将探讨如何使用JavaScript读取本地文件夹，并实现图片的异步加载，即图片的LazyLoad技术。 一、JavaScript读取本地文件夹 在浏览器环境中，出于安全考虑，JavaScript无法直接访问用户的本地文件系统...
- `index.html`：可能是一个包含异步加载图片的示例网页，展示如何在实际项目中应用图片异步加载。 - `下载必读.txt`：可能包含关于文件的版权信息、使用条款或其他重要提示。 - `images`：这是一个目录，可能包含了...
1. **多文件支持**：LazyLoad不仅限于加载图片，它还可以帮助你延迟加载JavaScript和CSS文件。这意味着你可以将非关键脚本和样式表设置为延迟加载，从而改善首屏加载时间。 2. **跨浏览器兼容**：LazyLoad设计的...
jQuery.lazyload 是一个非常流行的JavaScript插件，专用于优化网页性能，通过实现图片的懒加载技术。这个插件的核心理念是延迟非视口内的图片加载，直到用户滚动页面并接近这些图片时才进行加载。这样可以显著减少...
- **异步加载图片**：使用像SDWebImage或Kingfisher这样的第三方库，或者使用GCD（Grand Central Dispatch）来异步加载网络图片，避免阻塞主线程。 - **缓存处理**：为了提高性能，通常会将加载过的图片缓存到内存...
### Android异步加载图片知识点详解 #### 一、概述 在Android开发中，为了提高用户体验，减少因加载图片导致的界面卡顿问题，通常会采用异步加载图片的技术。这种方式可以确保用户在浏览应用时不会因为等待图片...
懒加载（Lazy Load）是一种优化网页性能的技术，主要用于图片、视频和JavaScript等资源的加载。在网页中，不是一次性加载所有资源，而是当用户滚动页面到特定位置或需要时才开始加载，这样可以减少初次加载页面时的...
3. **异步加载**：异步加载图片的关键在于使用`$.ajax()`或`$.get()`方法。当图片需要加载时，我们通过这些方法向服务器发送请求，获取图片数据，并将其插入到页面中。同时，为了实现延迟加载，我们可以设置一个阈值...
异步加载树型是 ExtJS Tree 的一个重要特性，允许只在需要时动态加载子节点，从而提高页面的加载速度和用户体验。 异步加载通常通过 AJAX 请求实现，只有当用户展开一个节点时，才会向服务器请求该节点的子节点数据...
在前端框架中，如React、Vue和Angular，都有专门的组件或库支持异步加载图片。例如，React可以使用`react-lazyload`或`react-image`，Vue有`vue-lazyload`，Angular可以借助`ng-lazyload-image`。 对于Web开发，...
"lazyload-js-css-loader"是一个优化前端资源加载的工具，主要针对JavaScript和CSS文件，旨在提升网页加载效率。在现代Web开发中，页面性能是用户体验的关键因素，而延迟加载（Lazy Load）技术就是一种有效提高加载...
- **基本概念**：异步加载（Lazy Loading）是一种延迟加载策略，它仅在用户滚动到浏览器视口内的时候才加载图片，而不是一次性加载所有图片。这显著减少了初次加载页面所需的时间。 - **jQuery实现**：jQuery提供...
`lazyload-min.js`的核心功能在于，当用户需要时，才会加载对应的城市数据，而非一次性加载所有数据，这大大降低了对网络带宽的要求，尤其在面对大量城市数据时，这种优化显得尤为重要。该插件的实现原理是利用...
JavaScript中的预加载（preload）和延迟加载（lazy load）是两种优化网页性能的重要技术。预加载主要用于在用户访问页面之前预先加载一些关键资源，如图片、脚本或样式表，以便用户在实际需要时可以快速获取，提升...
4. **异步请求触发器**: Tree Panel的`load`事件或节点的`expand`事件可以触发异步加载。当用户展开节点时，会触发加载子节点的操作。 5. **服务器端处理**: 服务器端需要提供一个接口，接收请求并返回对应节点的子...
使用interSectionObserver API异步加载图片 当前懒加载图片的方法 要想知道当前是否需要加载一张图片，我们需要坚持当前页面可见范围内这张图片是否可见。如果是，则加载。 检查方法：我们可以通过事件和事件处理器...