Question

所以我一直在尝试实现jQuery的lazyload插件，以帮助提高我试图加载的数千个图像的效率。

可以在此处找到LazyLoad：http://www.appelsiini.net/projects/lazyload

然而，当我尝试在我的VS中自己运行他们的示例时，我不断收到Javascript错误...

Microsoft JScript运行时错误：对象不支持属性或方法'lazyload'

Javascript文件：

$(function() {
      $("img").lazyload({
          effect : "fadeIn"
          /*
          ,appear : function(elements_left, settings) {
              console.log("appear");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          },
          load : function(elements_left, settings) {
              console.log("load");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          }
          */
      });
  });

HTML文件：

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js" type="text/javascript"></script>

               <div id="container" style="width: 765px; overflow: scroll;">
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
                    <img border="0" alt="Update/Edit Photo" data-original="/Images/editUptdatePhoto.png" src="/Images/editUptdatePhoto.png" width="100%" />
               </div>

所以我的大问题是为什么我会一直收到这个奇怪的错误？我搜索并浏览整个互联网寻求解决方案。我发现一个答案就是不再支持延迟加载，但是当jQuery自己不断更新其lazyLoading插件时，这怎么可能。 2012年，他们将其更新为v1.8。他们的示例网站在这里工作：http://www.appelsiini.net/projects/lazyload/enabled_fadein.html ....但是当在我自己的计算机上运行时，它不起作用。我在Internet Explorer中运行（Internet称lazyload适用于IE）。

希望有些大师能尽快回答。提前谢谢！

更深入的上下文代码......

HTML：

    window.onload = function () {//I tried putting lazyload here same error occurs};

$(document).ready(function () {
    //I tried putting lazyload here same error occurs
});

$(function() {
      $("img").lazyload({
          effect : "fadeIn"
          /*
          ,appear : function(elements_left, settings) {
              console.log("appear");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          },
          load : function(elements_left, settings) {
              console.log("load");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          }
          */
      });
  });

Answer 1

我认为实施不正确。我刚刚实现了它，这项工作是一种魅力。让我一步一步地告诉你我做了什么。

我在VS 2010中创建了一个新网站。
然后我添加了你提到的DIV部分。
在目录中添加了三张图片。
在MasterFile的顶部添加了CDN，即头部。
然后添加了脚本

$（function（）{ $（ “IMG”）。lazyload（{ 效果：“淡入淡出” / * ，出现：function（elements_left，settings）{ 的console.log（ “出现”）; 的console.log（elements_left）; //console.log（this，elements_left，settings）; }， load：function（elements_left，settings）{ 的console.log（ “负载”）; 的console.log（elements_left）; //console.log（this，elements_left，settings）; } * / }）; }）;

请再次检查并告诉我..

Answer 2

github的CDN有些令人作呕的错误。链接工作完美，但尝试CDN到它不会得到任何东西。相反，你必须右键单击舔和另存为...以获取lazyLoader javascript文件。

对象不支持属性或方法'lazyload'

2 个答案: