JAIL JQuery插件(JQuery异步映像加载器)


JAIL JQuery Plugin (jQuery Asynchronous Image Loader)

如果有人能发现我在这里做错了什么,我会非常感激的!

我正在尝试使用此插件:http://www.sebastianoarmelibattana.com/projects/jail

我已经将它包含在我的网页中,这是一个通过AJAX请求提交并在表格中显示搜索结果的搜索表单。这个表恰好是另一个名为dataTables的插件。

以下是相关的代码位:

AJAX请求成功完成后插件的重新初始化(在实际的HTML页面中也进行了相同的初始化):

 // re-initialise lazyload, lightbox and dataTable plugins
        $('img.lazy').jail();
        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "bPaginate": false,
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });

这是php的一行,显示了包含缩略图的相关表格单元格:

 $shortname = $row['filename'];
 $doc = "/central/testdocs/".$row['filename'];
 $thumb = "include/doc-thumbnail.php?doc=$doc";
 echo("'n<div class='"thumbnail'">'n<td class='"center'"><a class='"lightbox'" title='"$shortname'" href='"$thumb&dpi=96'"><img class='"lazy'" data-href='"$thumb'" src='"images/blank.png'" width='"50'" height='"50'"/></a></td>'n</div>'n");

请注意,涉及到另一个插件-lightbox,所以不确定这是否会影响情况。

目前,看起来JAIL插件正在做一些的事情,但页面一加载,所有图像都会立即加载。

当你点击缩略图时,灯箱仍然可以工作——页面实际上和以前一样工作,只是在页面完全加载之前,缩略图单元格是空的。

我发现了错误,最愚蠢的事情!

因为我试图使用最初的懒惰加载插件,所以我在CSS中有一条现有的规则来隐藏类懒惰的图像,所以插件无法做到这一点。

如果其他人遇到这个问题,那该怎么办!