延迟加载图片使用lazyload

 （学习网站：http://www.neoease.com/lazy-load-jquery-plugin-delay-load-image/）

常见问题解决方案：

第一种情况：$("img").lazyload is not a function解决方式

1.0：$("img").lazyload is not a function解决方式

第二种情况：为什么下位滚动条没有出现想要的效果呢：

这是因为默认触发触发的事件是WINDOW窗体的滚动条的滚动事件，因此我们要设置需要指定窗体的滚动条触发事件

 1 @{
 2     ViewBag.Title = "Index";
 3 }
 4 
 5 <style type="text/css">
 6   
 7     .indiv {
 8         float: left;
 9         width: 94px;
10         height: 100px;
11         border: 1px solid red;
12         font-size: 10px;
13         font-weight: bold;
14         text-align: center;
15         background: yellow;
16     }
17 </style>
18 <html>
19 <head>
20 
21 
22     <title></title>
23 </head>
24 
25 
26 <body>
27 
28 <div  id="div01"class="div01" style="border: 1px solid goldenrod;width: 1000px;height: 400px;float: left;overflow: auto">
29         <div style="border: 1px solid green; width: 400px;">
30 
31            @for (int i = 0; i < 120; i++)
32            {
33                 <div class="indiv">@i
34              <img data-original="/Content/QQ截图20150521102656.png" class="lazy" width="26" height="26px" alt=""  src="~/Content/SUM85G.png">
35             </div>
36               
37            }
38           
39         </div>
40     </div>
41 
42 </body>
43 </html>
44 <script src="/Scripts/jquery-1.7.1.min.js"></script>
45 <script src="/Content/jquery.lazyload.min.js"></script>
46 <script type="text/javascript">
47 
48     jQuery(document).ready(function ($) {
49         $("img").lazyload({
50             effect: "fadeIn",
51             container: $("#div01"),//指定窗体的滚动条           
52     });
53     });
54 </script>
$("img").lazyload({ effect: "fadeIn", container: $("#div01"),//指定窗体的滚动条 });

第三种情况：lazyload 错误 ：未定义的变量:checkbrowse

lazyload 在使用的时候可能会报错 错误内容是  ：未定义的变量:checkbrowse

    本来明明文件、方法都对但就是没有效果，甚至还有错误导致页面的 其他效果不能用

    关于  未定义的变量:checkbrowse

    的原因就是判断浏览器版本的checkbrowse()没有定义  在jquery.lazyload.js补充一下就好了

function checkbrowse() {
    var ua = navigator.userAgent.toLowerCase();
    var is = (ua.match(/\b(chrome|opera|safari|msie|firefox)\b/) || ['', 'mozilla'])[1];
    var r = '(?:' + is + '|version)[\\/: ]([\\d.]+)';
    var v = (ua.match(new RegExp(r)) || [])[1];
    jQuery.browser.is = is;
    jQuery.browser.ver = v;
    return {
        'is': jQuery.browser.is,
        'ver': jQuery.browser.ver
    }
}

 

posted on 2015-05-23 14:39  高达  阅读(190)  评论(0)    收藏  举报

导航