How to configure jQuery.Lazy() Plugin to load/fadein images after Partial Page AJAX retrieve in ASP.NET Core Razor Pages

Viewed 68

I'm trying to use .lazy() to fade in images retrieved from the DB via AJAX. On a simple page (without AJAX call), the image fadein works great. But when I use a Partial Page/AJAX to retrieve the image list, .lazy() doesn't work. Here is my .js code:

let lazyInstance = $(".lazyLoadImage").Lazy({
    chainable: false,
    bind: 'event',
    effect: "fadeIn",
    effectTime: 1000,
    threshold: 0
    }
});

getlazyLoadImage();

function getlazyLoadImage() {
   $('#myList').hide();
   let pMyString = $('#myString').val();

   $("#myList").load("mySearch/mySearchListPartial", { __RequestVerificationToken: '@token', "pMyString": pMyString, ... }, function (responseTxt, statusTxt, xhr) {
       if (statusTxt == "success") {

           $("#myList").slideDown("fast", function () {
                lazyInstance.addItems(".lazyLoadImage");
                lazyInstance.update();
            });
       }
       else if (statusTxt == "error") {
           $('#myList').show().html('<p class="error-details">Error: ' + xhr.status + ': ' + xhr.statusText + '</p>');
       }
   });
}

As a test, I created 2 separate pages:

  1. first one with 15 embedded images (similar to your example: http://jquery.eisbehr.de/lazy/example_show-a-loading-image
  2. and second one that does exactly the same thing (display the same 15 images), but this time the AJAX script above is used to populate/display the contents of the Partial Page in a <div id="#myList"></div>.

When I pulled out the lines:

lazyInstance.addItems(".lazy");
lazyInstance.update();

into a separate .js file, I noticed that Page 1) shows a list of 15 img.lazy entries on top of the lazyInstance, but in Page 2) AJAX it does NOT have these entries.

Does anyone know how to configure .lazy() to register these AJAX retrieved images?

I'm already using .lazy() to manage/load responsive scripts (see: How to configure jQuery.Lazy() Plugin to load second element ONLY after first is loaded), so I thought this would be a simple addition, but unfortunately it's not... :(

Thanks for any help...

0 Answers
Related