图片懒加载，首屏（目测浏览器最大化窗口时的可见范围）可见区域以外的所有图片使用懒加载，即在滚动页面的时候才自动获取图片，实现方法为采用修改img标签的src属性为src3或src4，阻止图片的加载。
<html>
<script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="./common_lazyload.js"></script>
<body id="index">
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
<img src3="./gw.jpg"/><p>
</body>
</html>
分享到：
相关推荐
### 图片懒加载技术在LayUI中的应用 #### 一、引言 在现代Web开发中，用户体验是至关重要的。对于包含大量图片的网站来说，优化页面加载速度显得尤为重要。图片懒加载（Lazy Loading）是一种提高网页性能的技术，...
图片懒加载是一种优化网页性能的技术，它在网页加载时并不会一次性加载所有图片，而是等到用户滚动页面，即将看到这些图片时才开始加载。这样可以显著减少初始页面加载时间，提高用户体验，特别是对于拥有大量图片的...
现在我们已经准备好了基本环境，只需要两行代码就能启用图片懒加载功能。首先，给需要懒加载的图片添加一个特定的CSS类，例如`lazy`： ```html ``` 这里，`data-src`属性用于存储图片的真实URL，而`src`属性可以...
在前端开发中，图片懒加载（Lazy Load）是一种优化网页性能的技术，它允许网页只在用户滚动到可视区域时才加载图片，而不是一次性加载所有图片。这样可以显著减少页面初始加载时间，提升用户体验，尤其在处理大量...
在处理大量图片时，为了提高页面加载速度和节省用户流量，通常会采用“图片懒加载”技术。这种技术允许我们在需要时才加载图片，而不是一次性加载所有图片。 图片懒加载的核心思想是只加载当前可视区域内的图片，当...
图片懒加载是一种优化网页性能的技术，它通过延迟加载非可视区域内的图片，直到用户滚动页面使其进入可视区域时才开始加载。这种技术可以显著减少页面初始化时的数据传输量，提高页面加载速度，提升用户体验，特别是...
**jQuery LazyLoad 图片懒加载实例** 在网页设计中，图片加载是影响页面性能的关键因素。当页面包含大量图片时，一次性加载所有图片可能会导致页面加载速度变慢，用户体验下降。为了解决这一问题，我们可以使用`...
标题 "ionic+requirejs实现图片懒加载" 描述了一个使用Ionic框架和RequireJS库来创建一个具有图片懒加载功能的移动应用项目。这个项目旨在优化用户体验，特别是在移动设备上，通过延迟加载非可视区域的图片，减少...
**JQ 图片懒加载**是一种优化网页性能的技术，它主要应用于含有大量图片的页面，以提高页面加载速度和用户体验。在传统的网页加载中，所有图片会在页面加载时一次性加载，这可能导致页面加载时间过长，尤其是对于...
图片懒加载判断图片是否滚动到视图内，使用jquery.lazyload.js插件，还得大于五十个字，真麻烦随便凑凑字吧，仅供参考
网页图片懒加载是一种优化网页性能的技术，主要针对页面中的大量图片。当用户滚动网页时，只有进入视口的图片才会被加载，未进入视口的图片则延后加载，这样可以减少初次页面加载的时间，提高用户体验。jQuery是一个...
**jQuery图片懒加载技术详解** 在网页设计中，图片加载是一项关键任务，尤其当页面包含大量图片时。传统的做法是所有图片在页面加载时一次性全部加载，这可能导致页面加载速度变慢，用户体验下降。为了解决这个问题...
图片懒加载是一种优化网页性能的技术，它通过延迟加载非视口内的图片，直到用户滚动到它们可见的位置时才真正加载。这种技术对于提高页面加载速度、节省带宽资源以及改善用户体验有着显著的效果。"my--图片懒加载...
在移动端网页设计中，图片懒加载是一种优化网页性能的重要技术。由于移动设备的网络环境、内存和处理器资源相对有限，不适宜一次性加载所有图片，尤其是对于长页面而言，用户往往只看到页面的一部分，无需立即加载...
"微信小程序图片懒加载"就是为解决这个问题而提出的一种技术策略。 **一、图片懒加载的原理** 懒加载（Lazy Loading）是一种网页和应用程序优化技术，它将非可视区域的内容延迟加载，只在用户滚动到相应位置或需要...
标题中的"js lazyLoad 图片懒加载demo"指的是一个使用JavaScript实现的图片懒加载示例项目。在这个项目中，开发者可能会用到一个名为`lazyload.js`的插件，该插件帮助简化了图片懒加载的实现过程。 描述中提到的...
**echo.js图片懒加载插件详解** 在网页开发中，图片是重要的元素之一，但大量图片的加载往往会影响页面的加载速度，用户体验也随之下降。为了解决这个问题，开发者们引入了“图片懒加载”技术。echo.js是一款轻量级...
懒加载或者可以说是延迟加载，针对非首屏或者用户”看不到”的地方延迟加载，有利于页面首屏加载速度快、节约了流量,用户体验好 实现方式 传统H5的懒加载方式都是通过监听页面的scroll事件来实现的，结合viewport的...
图片懒加载（Lazy Loading）是一种优化网页性能的技术，它允许我们延迟加载非首屏内容，尤其是大尺寸的图片，直到用户滚动到它们所在的位置时才开始加载。这减少了初次页面加载的时间，提高了用户体验，同时也节省了...