zoukankan      html  css  js  c++  java
  • Jquery 图片延迟加载技术

    参考网址: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

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

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

    然后........

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

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

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

    @陈卧龙的博客 

  • 相关阅读:
    如何查看IIS的80端口被占用? 拂晓风起
    配置VSS2005(在局域网内搭建服务器) 拂晓风起
    Log4Net ,.net和SQL Server的完美结合 拂晓风起
    SQL Server简单使用配置 拂晓风起
    ztree图标不显示
    oracle添加同义词
    Struts2作用域和标签库(转)
    java实现链表(转)
    unexpected end of subtree(hql拼写有误,仔细查看hql语句,以及参数值的导入)
    http://www.mianwww.com/html/2012/10/17027.html面试题(经典)
  • 原文地址:https://www.cnblogs.com/chenwolong/p/7060875.html
Copyright © 2011-2022 走看看