假设您在 ul 中设置了一组 imgs,如下所示。
<ul>
<li class="pic" name="pic_1_caption"><img src="abc_1.jpg" /></li>
<li class="pic" name="pic_2_caption><img src="abc_2.jpg" /></li>
<li class="pic" name="pic_3_caption><img src="abc_3.jpg" /></li>
<ul>
我可以成功定位特定的 img
src 和 name
在列表中使用...
a = 0;
b = $('.pic').eq(a).attr('name');
c = $('.pic img').eq(a).attr('src');
....其中 a 是索引,可以根据 img
进行更改我想瞄准。
我不知道如何定位 <img>
当前索引号列表项的,以便我可以检查 <img>
何时出现当前索引是否已加载。
我想它可能看起来像这样......
$('.pic img').eq(a).on('load' , function(){
console.log('img has loaded');
});
...但不起作用。
最佳答案
您可以尝试使用HTML5 data attributes :
<ul>
<li class="pic" data-loaded="false" name="pic_1_caption"/><img src="abc_1.jpg"></li>
<li class="pic" data-loaded="false" name="pic_2_caption"/><img src="abc_2.jpg"></li>
<li class="pic" data-loaded="false" name="pic_3_caption"/><img src="abc_3.jpg"></li>
<ul>
设置名为 data-loaded
的属性在每个 <li>
,首先给它们全部一个 false 值。
然后就可以使用jquery .load()
函数来捕获每当图像加载到页面中时。当图像加载到页面中时,您只需更改加载的图像 data-loaded
.load()
内的值为 true这样:
$( '.pic' ).find( 'img' ).load(function() {
// Handler for .load() called.
$( this ).parent().data( 'loaded', 'true' );
});
最后,您可以简单地编写一个函数来检查 data-loaded
属性值 - 给定索引 - 这样:
function imageAtIndexLoaded(index) {
return $( '.pic' ).eq( index ).data( 'loaded' );
}
完整的解决方案可以在this JsFiddle中找到.
关于jquery - 使用 jQuery 在 ul 中定位 img 标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28035278/