Lazyload thumbnails from timthumb source?

Question

I'm trying to load about 300+ thumbnails using the following inside a for loop and a
ul id="imagesContainer"

echo "<li><a href=\"$dirname$curimg\" rel='prettyPhoto[gallery2]'><img class='lazy' data-original='img.php?src=$dirname$curimg&amp;w=300&amp;zc=1' width='300' height='300' src='img.php?src=$dirname$curimg&amp;w=300&amp;zc=1' /></a></li>" ;

and just before </body>

$(function() {
 $("img.lazy").lazyload({
     container: $("#imagesContainer"),
     effect : "fadeIn",
     failure_limit : 5
 });
});

My problem is that all images are loaded at the beginning and not as soon as I scroll to them, resulting 300+ requests on page load. Any suggestions?

Answer 1

My mistake instead of

echo "<li><a href=\"$dirname$curimg\" rel='prettyPhoto[gallery2]'><img class='lazy' data-original='img.php?src=$dirname$curimg&amp;w=300&amp;zc=1' width='300' height='300' src='img.php?src=$dirname$curimg&amp;w=300&amp;zc=1' /></a></li>" ;

here is the correct code which works

echo "<li><a href=\"$dirname$curimg\" rel='prettyPhoto[gallery2]'><img class='lazy' data-original='img.php?src=$dirname$curimg&amp;w=300&amp;zc=1' width='300' height='300' /></a></li>" ;