Lazy Load not working after getting images with jquery

Question

Hello everybody I have a question I am using lazy load for my images in my website. I taking my first 10 datas using server side , here is ok. However I load next 10 datas by using jquery> ajax . I can get the data what I want but lazy load function is not working on new datas.

$(window).scroll(function () {
            if ($(window).scrollTop() == $(document).height() - $(window).height()) {

                $.getScript("//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js");
                $.getScript("~/Content/js/jquery.js");
                $.getScript("~/Content/js/main.js");
                $.getScript("~/Content/js/jquery.lazyload.js");
                GetNextPageData(true);

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

                $(window).bind("load", function () {
                    var timeout = setTimeout(function () {
                        $("img.lazy").trigger("burak")
                    }, 1000);
                });
            }
        });

and here is part of my view

<div class="col-xs-6 pr0 js-img-container">

         @{
             string img1 = item.image_1;
             string img2 = item.image_2;   
         }
             @*<img src="~/Content/img/loading.gif" id="img1" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img1" class="lazy js-img-left img-responsive" style="height:250px;width:317px;" title="" alt="@_a">*@
         <img src="~/Content/img/loading.gif" id="img1" data-groupornot="@GroupOrNot" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img1" class="lazy js-img-left img-responsive img-fix" title="" alt="@_a">
         <span id="spn1_@_b" class="@isLikeLeft"></span>
         <div class="which-bar left"><span id="perc1@_b@GroupOrNot" class="pr5">@percentage1%</span></div>
     </div>
     <div class="col-xs-6 pl0 js-img-container">
         @*<img src="~/Content/img/loading.gif" id="img2" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img2" class="lazy js-img-right img-responsive" title="" alt="@_a">*@
             <img src="~/Content/img/loading.gif" id="img2" data-groupornot="@GroupOrNot" data-original="http://static.mobilozi.com/phonestartersite/images/FlashImages/whichOne/@img2" class="lazy js-img-right img-responsive img-fix" title="" alt="@_a">
         <span id="spn2_@_b" class="@isLikeRight"></span>
         <div class="which-bar right"><span id="perc2@_b@GroupOrNot" class="pl5">@percentage2%</span></div>
     </div>

I tried to load by using getscript but it didnt work. What should I do to trigger it again ? Thank you.

Answer 1

jQuery lazyload isn't really made for dynamic content. Generally you must recall $.lazyload all the time, which might end up in memory leaks and decrease of runtime performance. I recommend you to try lazySizes. Everything you need to do is to add the script to your page, add the class lazyload and data-src for the URL to your images. No other special JS method to call or to trigger an event.

Just try it yourself you will be pleased.

In case you don't want to alter your markup you can also configure it to use lazy class and the data-original attribute instead:

window.lazySizesConfig = window.lazySizesConfig || {};
window.lazySizesConfig.lazyClass = 'lazy';
window.lazySizesConfig.srcAttr = 'data-original';