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>  
    一定要明白靠自己
  • 相关阅读:
    ubuntu下怎么配置/查看串口-minicom工具
    jpg与pgm(P5)的互相转换(Python)
    hyper-v安装ubuntu18的全过程+踩过的坑(win10家庭版)
    zerotier的下载、安装、配置与使用(win10、ubuntu)
    github page+jekyll构建博客的解决方案
    opencv2.4.13.7的resize函数使用(c++)
    c++中的const和volatile知识自我总结
    各种优化算法详解
    P与NP问题
    vs2017配置pthread.h的方法
  • 原文地址:https://www.cnblogs.com/zjpzjp/p/5813134.html
Copyright © 2011-2022 走看看