zoukankan      html  css  js  c++  java
  • 图片懒加载解决方案 lazyload.js

    1. <!doctype html>  
    2. <html>  
    3. <head>  
    4. <meta charset="utf-8">  
    5. <title>懒加载</title>  
    6. <meta content="max-age=0" http-equiv="Cache-Control" />  
    7. <meta content="320" name="MobileOptimized" />  
    8. <meta content="YES" name="apple-touch-fullscreen" />  
    9. <meta content="yes" name="apple-mobile-web-app-capable" />  
    10. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    11. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">  
    12. <link rel="stylesheet" type="text/css" href="css/cyc.css">  
    13.     <script src="js/jquery-2.0.3.min.js"></script>  
    14.     <script src="js/jquery.lazyload.min.js" type="text/javascript"></script>  
    15.     <script type="text/javascript" charset="utf-8">  
    16.       
    17.       $(function() {  
    18.         $("img.lazy").lazyload({effect: "fadeIn",threshold : 200});  
    19.     });  
    20.     </script>  
    21. </head>  
    22. <body>  
    23.     <href="http://blog.csdn.net/xuelang532777032"><img class="lazy" alt="" width="640" height="480" data-original="images/a1.jpg" /></a>  
    24.     <href="http://blog.csdn.net/xuelang532777032"><img class="lazy" alt="" width="640" height="480" data-original="images/a2.jpg" /></a>  
    25.     <href="http://blog.csdn.net/xuelang532777032"><img class="lazy" alt="" width="640" height="480" data-original="images/a3.jpg" /></a>  
    26.     <href="http://blog.csdn.net/xuelang532777032"><img class="lazy" alt="" width="640" height="480" data-original="http://www.yjz9.com/uploadfile/2014/1009/20141009042740145.jpg" /></a>  
    27.     <href="http://blog.csdn.net/xuelang532777032"><img class="lazy" alt="" width="640" height="480" data-original="http://www.yjz9.com/uploadfile/2014/1009/20141009042741784.jpg" /></a>  
    28.     <href="http://blog.csdn.net/xuelang532777032"><img class="lazy" alt="" width="640" height="480" data-original="http://www.yjz9.com/uploadfile/2014/1009/20141009042742539.jpg" /></a>  
    29.     <href="http://blog.csdn.net/xuelang532777032"><img class="lazy" alt="" width="640" height="480" data-original="http://www.yjz9.com/uploadfile/2014/1009/20141009042743810.jpg" /></a>  
    30.      
    31.       
    32.      
    33. </body>  
    34. </html>  
    一定要明白靠自己
  • 相关阅读:
    select2 下拉搜索 可编辑可搜索 / 只可搜索
    获取服务器时间ajax
    table中td 内容超长 自动折行 (含字母数字文字)
    下拉菜单 ,三级联动 ,夹其它下拉菜单
    echarts 添加标线,设置颜色
    table 中的tr 行点击 变换颜色背景
    checkebox 全选 ,子复选框单个全部选择后,全选框也会被选择
    replace替换,全局和局部替换
    字断行
    ydoc 参考系列
  • 原文地址:https://www.cnblogs.com/zjpzjp/p/5813134.html
Copyright © 2011-2022 走看看