jQuery jail 插件和图像加载有时不起作用

Question

我尝试使用 jail 插件加载图像。它有效，但有时不起作用。

这是我的代码:

<script type="text/javascript">
    $(document).ready(function () {
        //$('img.lazy').jail({
        $("table[id*=dgImages] img").jail({
            //callbackAfterEachImage: function () {},
            //callback: (function () { alert("All the images are loaded"); })
        });
    });
</script>

<asp:DataList ID="dgImages" runat="server" RepeatColumns="4" RepeatDirection="Horizontal" RepeatLayout="Table" CellPadding="1">
    <ItemTemplate>
        <div class="BusyStyles>
            <asp:Image CssClass="lazy" runat="server" id="Image1"  data-href='<%# Eval("photos") %>' BorderWidth="0" alt="" style="width:300px;height:300px;"/>
            <noscript><img class="nolazy" src='<%# Eval("photos") %>' border='0' width="300px" height="300px"/></noscript>
        </div>
    </ItemTemplate>
</asp:DataList>

当我使用如下语法加载图像时，它会起作用:

$(document).ready(function () {
    $('img.lazy').jail({
        //callbackAfterEachImage: function () {},
        //callback: (function () { alert("All the images are loaded"); })
    });
});

但是当我尝试加载这样的图像时，它不起作用，我不明白为什么:

$(document).ready(function () {
    $("table[id*=dgImages] img").jail({
        //callbackAfterEachImage: function () {},
        //callback: (function () { alert("All the images are loaded"); })
    });
});

这个插件还有一个回调函数，在每个图像加载时调用。我想知道加载图像的直接父级是谁。每个图像都包含在一个 div 中，因此 div 将是父级。告诉我一种方法，从 callbackAfterEachImage 回调中获取加载图像的直接父级的引用。

因此，我可以与直系 parent 一起工作。

Answer 1

对我来说选择器 "table[id*=dgImages] img"看起来不错。

我已经构建了一个 working example我正确地得到了所有图像。我不知道控件<asp:DataList>生成的标记到底是什么不过，所以我编了一些东西。也许您生成的标记略有不同，因此您的选择器不起作用。

也许有一件事，您缺少 div <div class="BusyStyles> 的 class 属性的双引号

<小时/>

回调callbackAfterEachImage ，两个参数传递给函数:作为 jquery 对象的图像和插件的选项。要获取直接父级( <div> )，只需使用 .parent() :

$("table[id*=dgImages] img").jail({
    ...
    callbackAfterEachImage: function ($img, options) {
        var $parent = $img.parent();
        alert('parent id: ' + $parent.attr('id'));
    }
});