jquery - 使用 jQuery 在 ul 中定位 img 标签

Question

假设您在 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'); 
});

...但不起作用。

Answer 1

您可以尝试使用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中找到.