jQuery lazyload stops loading when another javascript is fired

Question

i know it is really hard to give an answer without much of my source codes, but I would like to know if anyone ran into this problem before. This is my lazy load codes.

function displayLogo(merchant,merchantLogoId){
 $.getJSON("http://202.161.46.8:83/TGLWebService/logows/getBigLogo/"+merchant, function(data) {
      document.getElementById(merchantLogoId).innerHTML = ("<img class='lazy' src='img/icon/ImageLoading.jpg' data-original="+data.bigImageUrl+">");
      $('img.lazy').lazyload();
  }); 
}

It works fine when I run my website and scroll up and down and lazyloading works perfectly.

The problem occurs lets say when initially i launch the website and the first few images are loaded even if i scroll down, but if I lets say open my navigation menu, my lazyloading stops working when i scroll up and down, i.e. it doesnt load the rest of the images which are not loaded.

I tried using $('img.lazy').lazyload(); inside document.ready and moving out of the displaylogo function but it does not work at all, i.e. when the page loads, lazyloading does not work at all.

Any help would be greatly appreciated.

Answer 1

try add a .complete(); to the getJSON

for example

    $.getJSON('include/controllers/getCats.php', function(data) {
    jsonObj = data;
}).complete(function(){
       $('img.lazy').lazyload();

});