jQuery的监狱插件和图像加载有时不工作 [英] jQuery jail plugin and image load sometimes does not work

问题描述

我试图加载使用监狱插件图像。它的工作原理，但有时这是行不通的。

I tried to load images using the jail plugin. It works but sometimes it does not work.

下面是我的code：

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

在我的语法像加载图像，它的工作原理：

When i load images with the syntax like, it works:

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

但是，当我尝试加载像这样的图片，实在不行，我不明白为什么：

But when I try to load images like this, It does not work, I cannot understand why:

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

这插件也有每个图像加载时调用回调函数。我想知道加载图像的直接父是谁。每幅图像被包裹在一个div这样的div将是父。给我一个方法，从 callbackAfterEachImage 回调，获取加载图像的直接父的参考。

This plugin also has a callback function which is called when each image loaded. I want to know who the immediate parent of the loading image is. Each image is wrapped in a div so div will be parent. Show me a way, from callbackAfterEachImage callback, for getting the reference of immediate parent of the loading image.

因此​​，我可以与直接父工作。

As a result I can work with that immediate parent.

推荐答案

对于我来说，选择表[ID * = dgImages] IMG看起来不错。

For me the selector "table[id*=dgImages] img" looks good.

我有建立一个工作示例和我正确地得到所有的图像。我不知道到底是什么在控制生成的＆LT的标记; ASP：DataList控件＆GT; 虽然，所以我做了什么。也许你生成的标记略有不同，因此你的选择是行不通的。

I have build a working example and i correctly get all the images. I don't know exactly what is the markup generated by the control <asp:DataList> though, so i made up something. Maybe your generated markup is slightly different and thus your selector does not work.

有一件事情也许，你缺少一个双引号的div的class属性＆LT; D​​IV CLASS =BusyStyles＆GT;

One thing maybe, you are missing a double-quote for the class attribute of the div <div class="BusyStyles>

有关回调 callbackAfterEachImage ，两个参数传递给函数：图像作为一个jQuery对象，插件的选项。为了获得直接父（即＆LT; D​​IV＆GT; ），只要用 .parent（）：

For the callback callbackAfterEachImage, two parameters are passed to the function: the image as a jquery object, and the options of the plugin. To get the immediate parent (the <div>) just use .parent():

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

这篇关于jQuery的监狱插件和图像加载有时不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！