Question

我有以下HTML结构：

<ul id="list2">
  <li class="_column small">
    <img id="YB_random_with_img" src="/cms_agency/Images/CharterWebsite/W350xH300/Articles-(7)-350-300.jpg" alt="Home " title="Home " />
     <h2><a href="/cms_agency/more/articles/articles-(7)">Greece</a></h2>

  </li>
  <li class="_column small">
    <img id="YB_random_with_img" src="/cms_agency/Images/CharterWebsite/W720xH300/Articles-(1)-720-300.jpg" alt="Home " title="Home " />
     <h2><a href="/cms_agency/more/articles/articles-(1)">Stockholm</a></h2>
  </li>
  <li class="_column small">
    <img id="YB_random_with_img" src="/cms_agency/Images/CharterWebsite/W350xH300/Articles-350-300.jpg" alt="Home " title="Home " />
     <h2><a href="/cms_agency/more/articles/articles">Sailing in Italy</a></h2>
  </li>
</ul>

我的问题是它找不到._column中的最大图像，有时会施加小于最大图像的宽度，并且会导致布局出现问题。

我有以下代码：

 jQuery(document).ready(function () {
        jQuery("._column img").each(function () {
            if (this.width > 350) {
                jQuery(this.parentNode).addClass('large');
            }
            else {
                jQuery(this.parentNode).addClass('small');
            }

        });
    });

一些消化？谢谢！

Answer 1

来自ready()的文档：

如果代码依赖于加载的资源（例如，如果需要图像的尺寸），则应将代码放在load事件的处理程序中。

因此我们应该使用load()事件而不是ready()，以便在加载图片后检索正确的尺寸：

jQuery(document.body).load(function () {
  var largest;
  jQuery("._column img").each(function () {
    if(!largest)
        largest = this.width;
    else if(this.width>largest)
        largest= this.width;
  });
});

如何在列表中查找最大图像

1 个答案: