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。

中找到

使用jQuery在ul中定位img标记

1 个答案: