图片懒加载

最新推荐文章于 2025-06-10 13:28:14 发布

原创最新推荐文章于 2025-06-10 13:28:14 发布 · 103 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

js 专栏收录该内容

5 篇文章

订阅专栏


图片懒加载，首屏（目测浏览器最大化窗口时的可见范围）可见区域以外的所有图片使用懒加载，即在滚动页面的时候才自动获取图片，实现方法为采用修改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>