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>

私の大きな疑問は、なぜこの奇妙なエラーが発生し続けるのかということです。インターネット全体を検索して閲覧し、解決策を探しました。私が見つけた1つの答えは、遅延読み込みはもはやサポートされていないということですが、jQuery自体がlazyLoadingプラグインを更新し続けると、これはどうなるでしょうか. 2012年、彼らはそれをv1.8に更新しました。彼らのサンプル Web サイトはここで動作します: 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. VS2010で新しいWebサイトを作成しました。
  2. 次に、あなたが言及したDIV部分を追加しました。
  3. ディレクトリに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 を試みても何も得られません。代わりに、リックを右クリックして [名前を付けて保存] をクリックし、lazyLoader JavaScript ファイルを取得する必要があります。

于 2012-09-24T21:31:13.467 に答える