我尝试使用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
回调,获取加载图像的直接父级的引用。
因此,我可以与那位直接的父母一起工作。
答案 0 :(得分:0)
对我来说,选择器"table[id*=dgImages] img"
看起来不错。
我已经构建了working example并且我正确地获得了所有图像。我不知道控件<asp:DataList>
生成的标记究竟是什么,所以我编造了一些东西。也许你生成的标记略有不同,因此你的选择器不起作用。
有一件事可能是你错过了div <div class="BusyStyles>
对于回调callbackAfterEachImage
,将两个参数传递给函数:作为jquery对象的图像,以及插件的选项。要获得直接父级(<div>
),只需使用.parent()
:
$("table[id*=dgImages] img").jail({
...
callbackAfterEachImage: function ($img, options) {
var $parent = $img.parent();
alert('parent id: ' + $parent.attr('id'));
}
});