jquery插件实现图片延迟加载（lazyload.js）

最新推荐文章于 2024-04-24 01:03:46 发布

转载最新推荐文章于 2024-04-24 01:03:46 发布 · 216 阅读

文章标签：

#jquery插件 #插件 #实现 #图片延迟加载 #jquery

本文介绍了一种使用jQuery插件实现的图片懒加载技术，该技术能够显著减少页面加载时的数据交换量，尤其适用于包含大量高清图片的网页。通过将图片的真实路径替换为占位符，并在滚动时动态加载真实图片，提高了用户体验。

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

原文地址为： jquery插件实现图片延迟加载（lazyload.js）

在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间呢~

这里要实现的功能：可见页面的图片是加载的，而不可见页面通过滚动条下拉可见，这也叫做“ImageLazyLoad技术”，需要用到延迟加载的jQuery插件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片加载技术实例-欢迎关注tinyphp的博客</title>
<SCRIPT src="jquery.js" type=text/javascript></SCRIPT>
<SCRIPT src="jquery.lazyload.js" type=text/javascript></SCRIPT>
<script type="text/javascript" charset="utf-8">
      $(function() {
          $("img").lazyload({ 
          placeholder : "images/loading.gif",
                 effect: "fadeIn"
           });  
      });
</script>
<style>
img a,img{border:0px;}
div{ margin-bottom:10px;}
</style>
</head>
<body>
<img src="images/0.jpg" /><br />
<div><a href="#"><img src="images/loading.gif" data-original="images/1.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/2.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/3.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/4.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/5.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/6.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/7.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/8.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/9.jpg"></a></div>
<div><a href="#"><img src="images/loading.gif" data-original="images/10.jpg"></a></div>
</body>
</html>