Jquery 图片延迟加载技术

↘锁芯ラ 提交于 2020-03-16 06:03:22

参考网址:http://code.ciaoca.com/jquery/lazyload/

延迟加载能大大增加你网站的加载速度!

需要引入以下文件<Jq文件也是少不了的>:

<script src="~/Content/demo/jquery.lazyload.js"></script>
<script src="~/Content/demo/jquery.lazyload.min.js"></script>
<script type="text/javascript">
$('img').lazyload();
</script>

这些JQ文件的下载地址:http://code.ciaoca.com/jquery/lazyload/

官方网址:http://appelsiini.net/projects/lazyload/

建议将这些JQ文件引用放在HTML 文档的最下面,这句话很重要。

所引用的JQ文件必须在1.4版本以上

所加载的图片,必须设置他的高和宽。

最后,通过一个简单的例子加以示范:

示例代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
   <style type="text/css">
       img {
       height:800px; width:500px;
       }
   </style>
</head>
<body>
    <img src="images/grey.gif" data-original="images/1.jpg" /><br />
    <img src="images/grey.gif" data-original="images/2.jpg" /><br />
    <img src="images/grey.gif" data-original="images/3.jpg" /><br />
    <img src="images/grey.gif" data-original="images/4.jpg" /><br />
    <img src="images/grey.gif" data-original="images/5.jpg" /><br />
    <img src="images/grey.gif" data-original="images/6.jpg" /><br />
    <img src="images/grey.gif" data-original="images/7.jpg" /><br />
    <img src="images/grey.gif" data-original="images/8.jpg" /><br />
    <img src="images/grey.gif" data-original="images/9.jpg" /><br />
    <img src="images/grey.gif" data-original="images/10.jpg" /><br />
    <img src="images/grey.gif" data-original="images/11.jpg" /><br />
    <img src="images/grey.gif" data-original="images/12.jpg" /><br />
    <img src="images/grey.gif" data-original="images/13.jpg" /><br />
    <img src="images/grey.gif" data-original="images/14.jpg" /><br />
    <img src="images/grey.gif" data-original="images/15.jpg" /><br />
    <img src="images/grey.gif" data-original="images/16.jpg" /><br />
    <img src="images/grey.gif" data-original="images/17.jpg" /><br />
    <img src="images/grey.gif" data-original="images/18.jpg" /><br />
    <img src="images/grey.gif" data-original="images/19.jpg" /><br />
    <img src="images/grey.gif" data-original="images/20.jpg" /><br />
    <img src="images/grey.gif" data-original="images/21.jpg" /><br />
    <img src="images/grey.gif" data-original="images/1.jpg" /><br />
    <img src="images/grey.gif" data-original="images/2.jpg" /><br />
    <img src="images/grey.gif" data-original="images/3.jpg" /><br />
    <img src="images/grey.gif" data-original="images/4.jpg" /><br />
    <img src="images/grey.gif" data-original="images/5.jpg" /><br />
    <img src="images/grey.gif" data-original="images/6.jpg" /><br />
    <img src="images/grey.gif" data-original="images/7.jpg" /><br />
    <img src="images/grey.gif" data-original="images/8.jpg" /><br />
    <img src="images/grey.gif" data-original="images/9.jpg" /><br />
    <img src="images/grey.gif" data-original="images/10.jpg" /><br />
    <img src="images/grey.gif" data-original="images/11.jpg" /><br />
    <img src="images/grey.gif" data-original="images/12.jpg" /><br />
    <img src="images/grey.gif" data-original="images/13.jpg" /><br />
    <img src="images/grey.gif" data-original="images/14.jpg" /><br />
    <img src="images/grey.gif" data-original="images/15.jpg" /><br />
    <img src="images/grey.gif" data-original="images/16.jpg" /><br />
    <img src="images/grey.gif" data-original="images/17.jpg" /><br />
    <img src="images/grey.gif" data-original="images/18.jpg" /><br />
    <img src="images/grey.gif" data-original="images/19.jpg" /><br />
    <img src="images/grey.gif" data-original="images/20.jpg" /><br />
    <img src="images/grey.gif" data-original="images/21.jpg" /><br />
</body>
</html>
 <script src="Scripts/jquery-3.1.1.js"></script>
    <script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/jquery.lazyload.js"></script>
<script src="Scripts/jquery.lazyload.min.js"></script>

 <script type="text/javascript">
     $('img').lazyload();
 </script>
View Code

示例网址:http://www.huaxuancch.com/index.html

JQ版本下载:http://www.jq22.com/jquery-info122

演示截图,请打开示例网址,

由上图可知,网址初步仅仅只加载两张图片。

然后........

我们滑动鼠标滑轮.........

每滑到一张图片,就会自主加载。

这样的方式,避免了一次性加载所有图片,使网站打开速度大增。同时,也不会影响使用!

@陈卧龙的博客 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!