zoukankan      html  css  js  c++  java
  • jquery lazyload

    在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片,占的几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>
    复制代码

    jquery下载个较新的库就可以了,实例下载,看着比较清晰 http://pan.baidu.com/s/1u9nf4

  • 相关阅读:
    或得最新的采购单号并改变为定长
    javaScript学习之路(1)词法结构
    如何让IE下载时下载内容自动跳转到迅雷等下载软件中
    简单的数据库查询操作
    1.1软件工程概述之软件危机
    SQL基础(巧记范式)
    给程序员的五点建议--如何成为编程高手并以此创业
    License控制解决方案
    MVC+三层+ASP.NET简单登录验证
    我曾七次鄙视自己的灵魂
  • 原文地址:https://www.cnblogs.com/liuwenbohhh/p/4682494.html
Copyright © 2011-2022 走看看