0

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

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 自己不​​断更新他们的延迟加载插件时，这怎么可能。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);
          }
          */
      });
  });
4

2 回答 2

0

我认为执行不正确。我刚刚实现了它，这很有吸引力。让我一步一步告诉你我做了什么。

  1. 我在 VS 2010 中创建了一个新网站。
  2. 然后我添加了您提到的 DIV 部分。
  3. 在目录中添加了三张图片。
  4. 在 MasterFile 的顶部添加了 CDN——即头部。

  5. 然后添加脚本

    $(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 ); } */ }); });

请再次检查并告诉我..

于 2012-09-24T20:34:02.767 回答
0

github 的 CDN 有一些令人作呕的错误。链接完美运行，但尝试 CDN 访问它不会为您带来任何好处。相反，您必须右键单击 lick 并另存为... 以获取lazyLoader javascript 文件。

于 2012-09-24T21:31:13.467 回答