Javascript 延迟加载无法正常工作

我想在一页中显示多个图像。为了获得最佳观看效果，我集成了延迟加载

我的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>

$（文档）.ready（函数（）{
$（“.lazy”）.lazyload（{
效果：“法丹”
});
$（窗口）.scrollTop（1）；
});

我的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>

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

我的临时站点：

---

如果有人知道这一点，请帮助我

这很可能是当前lazyload插件无法实现的，因为无法对图像的显示方式进行排队。他们将显示一旦每个图像完成加载。如果有任何替代目前不是我所知道的。问：）