延迟加载不能正常工作

Question

我想在一个页面中显示图像数量。为了获得最佳观看效果，我整合了延迟加载。

我的javascript代码是

<script src="{$this->scriptFolder}jquery.lazyload.js"></script>
<script src="{$this->scriptFolder}lazy_loader.js"></script>
<script type="text/javascript">
     $(document).ready(function() {
         $(".lazy").lazyload({ 
            effect : "fadeIn"
         });
         $(window).scrollTop(1); 
     });
</script>

我的HTML代码就像这样

<ul>
    <li class="span2" id="hider"> 
        <a href="/Magazine/index/get/52/" class="thumbnail magazine_cover">
            <img width="180" height="230" class="lazy" alt="cover" src="/public/demo.jpg" data-original="http://magsonwink.com/ECMedia/MagazineFiles/MAGAZINE-141/ISSUE-10085/CoverPage/Thumbnail/Outlook.jpg">
        </a> 
    </li>
</ul>

但是当我加载此页面时，图像从不同的部分加载。我想逐个加载图片

我的暂存网站：http://staging.delhipress.thewinkstore.com/

如果有人知道这件事请帮帮我