9

e コマース Web サイトで lazyload() を使用しています。lazyload() はうまく機能します。私はそれを行うためにこのコードを使用します:

$(function(){
  $("img.lazy").lazyload({ 
  effect : "fadeIn"
          });
});

また、色、価格など、ajax を実行して新しい結果を表示するフィルタもあります。新しい結果が来ると、lazyload() は機能しません。lazyload() を live()、delegate() または on() と一緒に使用する必要があることはわかっています。しかし、私はjqueryの初心者であり、それができませんでした。誰でも私を助けてもらえますか？私のjqueryバージョンは1.7.2で、on()を使用できます。

4

8 に答える 8

2

注：この回答が受け入れられた時点で、これは機能していました。遅延読み込みプラグインが変更され、現在は壊れています。回答を取り消すことも、削除することもできません。

追加の DOM の挿入を担当する AJAX リクエストの一部として処理することを提案する別の Q&A があります。

ajaxリクエストの後に挿入された新しい画像へのバインディング画像の遅延ロード

ただし、これは私がそれを行う方法です：

$(document).on('DOMNodeInserted', 'img.lazy', function() {
    $(this).lazyload({
        effect: 'fadeIn'
    });
});

デモ: jsfiddle

于 2012-12-09T21:09:23.110 に答える
1

ウィンドウの読み込み後に読み込まれた画像 (AJAX など) の遅延読み込みは、スクロール イベントの前に画像を表示しません。これは、ウィンドウ ロード イベントの後に初期更新をトリガーするように内部的にハードコーディングされているためです。今のところ、上記の答えはすべて間違っています。

于 2013-04-13T17:16:01.877 に答える
0

私のシナリオでは、ページが読み込まれるときに、テンプレート ID を持つテンプレートのリストを取得します。そのテンプレートIDに基づいて、jQuery Lazyを使用して、ajaxを使用してbase64でエンコードされた画像を読み込み、ページに画像を遅延して読み込みます。

私のアプローチのいくつかのアイデアを得ることができれば幸いです

$(document).ready(function() {
  let imageArray = [0, 1, 10, 100, 1000, 1001];

  let parsedImageArray = $.map(imageArray, function(value) {
    return "<div class='lazy' data-loader='ajaxLoader' data-src='/echo/html/' data-method='post' contentId='" + value + "'></div><br>";
  });

  $("#content").html(parsedImageArray);

  console.log("Here" + parsedImageArray)
});


$(document).bind('DOMNodeInserted', function(e) {
  $('.lazy').lazy({
    effect: "fadeIn",
    event: "scrollstop",
    skip_invisible: true,
    removeAttribute: false,
    ajaxLoader: function(element, response) {
      let thumbnailId = element.attr("contentId");
      console.log("Here" + thumbnaiId);
      $.get("https://picsum.photos/id/" + thumbnailId, function(srcValue, status) {
        //for me i have to pull the base64 encode image from my server 
        let defaultImageDom = generateThumbnailImage(tempSrc);
        element.html(defaultImageDom);
        element.removeClass('lazy');
      }).fail(function(jqXHR, textStatus, errorThrown) {
        let defaultImageDom = generateThumbnailImage("");
        element.html(defaultImageDom);
        element.append("<em>Error Getting Thumbnail Preview</em>");
        element.removeClass('lazy');
      });
    },
  });
});

function generateThumbnailImage(srcValue) {
  let defaultImageDom = new Image();
  defaultImageDom.height = 200;
  defaultImageDom.style.borderColor = "#d5d5d5";
  defaultImageDom.style.borderWidth = "1px";
  defaultImageDom.style.borderStyle = "solid";

  if (srcValue && srcValue.length > 0) {
    defaultImageDom.src = srcValue;
  } else {
    //set your fallback image link
    defaultImageDom.src = "data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=";
  }
  return defaultImageDom;
}
.lazy {
  width: 700px;
  height: 467px;
  display: block;
  /* optional way, set loading as background */
  background-image: 'data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=';
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.9/jquery.lazy.plugins.min.js"></script>

<div id="content">
</div>

于 2020-04-29T22:47:03.490 に答える
0

レイジーロード画像でウェイポイントの無限スクロールを使用すると、同じ問題が発生します。(ただし、ajax コンテンツでは機能しません)。

そして、私はこれでその問題を修正しました:

$("img.lazy").lazyload({
    effect : "fadeIn",
    event: "scrollstop",
    skip_invisible : true
}).removeClass('lazy');

$(document).bind('DOMNodeInserted', function(e) {
    $("img.lazy").lazyload({
        effect : "fadeIn",
        event: "scrollstop",
        skip_invisible : true
    }).removeClass('lazy');
});

イベントで遅延読み込み構成をバインドしますDOMNodeInserted。

于 2015-07-05T19:55:34.157 に答える
-2

以下のコードを使用しましたが、うまくいきました：

$(document).on('ajaxStop', function() {
   $("img.lazy").lazyload({
        effect: 'fadeIn'
    });
});
于 2012-12-10T20:57:28.840 に答える
-2 
   $(document).ajaxStop(function() {$('.loading').removeClass('in');
    $("img.lazy").lazyload({
                effect: "fadeIn",
               container: $("#scrollable"),
               threshold: 100,
            })

      });

ajax画像で動作します。ただし、デフォルトでは最初の画像は表示されません。更新はトリガーされません。

于 2013-04-07T04:46:42.073 に答える