jquery lazyload plugin not working properly

Question

I am using the jquery lazyload plugin. The plugin doesnt work when the page loads. And only work when I click on the Home tab of my website. These are my snippets of my source code.

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

document.getElementById(merchantLogoId).innerHTML = ("<img class='lazy' src='img/icon/imageLoading.jpg' data-original="+data.bigImageUrl+">");

Anyone have any idea what could be the problem and a possible workaround for this?

Answer 1

try wrapping it inside document.ready()

$(document).ready(function() {
      $("img.lazy").lazyload();
  });

Answer 2

Could you provide a bit more info? a jFiddle would be useful

maybe use jquery to add the image and place lazyload after the images have been added.....

Just off the top of my head!

 $(function() {

      $("#merchantLogoId").html("<img class='lazy' src='img/icon/imageLoading.jpg' data-original="+data.bigImageUrl+">");

       $("img.lazy").lazyload();
  });

Answer 3

you need to set the effect :

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

Tested on firefox... hope this helps ..