javascript - 显示前检查损坏的外部图像错误

Question

我正在使用 jQuery 在显示外部图像之前检查它是否存在。这是我的代码:

<a href="#" class="gallery hidden">
  <img src="//abc.com/1.jpg" class="room-image">
</a>
<a href="#" class="gallery hidden">
  <img src="//xyz.com/2.jpg" class="room-image"> <!-- not found -->
</a>
<a href="#" class="gallery hidden">
  <img src="//def.com/3.jpg" class="room-image"> <!-- not found -->
</a>
<a href="#" class="gallery hidden">
  <img src="//mno.com/4.jpg" class="room-image">
</a>


<script type="text/javascript">
  $(".room-image").error(function(){
    $(this).parent().remove();
  });
  $(".room-image").parent().removeClass('hidden');
</script>

jsFiffled here

我想检查所有图像，删除损坏的图像，然后显示其余图像。但我编写的这个脚本几乎会立即执行，因为 .removeClass() 比 .error() 运行得更快。这会导致 View 将损坏的图像一一删除。

如何执行一次，以便用户看不到任何动态删除的内容？谢谢。

Answer 1

尝试

jQuery(function () {
    $(".room-image").error(function () {
        $(this).parent().remove();
    }).on('load', function () {
        $(this).parent().removeClass('hidden');
    }).each(function () {
        //to handle image which are already loaded - before page load
        if (this.complete) {
            if (this.width) {
                $(this).parent().removeClass('hidden');
            } else {
                $(this).parent().remove();
            }
        }
    });
})

演示:Fiddle