使用 jQuery 在 ul 中定位 img 标签

Question

假设您有一组像这样的 ul 中设置的 img。

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

在每个 <li> 中设置一个名为 data-loaded 的属性，首先给它们一个 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 标签

Target img tag within ul using jQuery

jquery

image

html-lists