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()快。这导致视图逐个删除损坏的图像。

如何执行此操作，以便用户看不到任何动态删除的内容？感谢。

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

Answer 2

死/空内容的前端管理是一个糟糕的设计师习惯。

您可以构建一个函数：

隐藏outter容器
仅渲染可访问的图像（参见Arun P Johny的回答）
show outter container

用户Arun P Johny也一个接一个suggested a good code for stacking functions。

我根据您的需要进行了编辑

function mainFunction() {
    function hideContainer(){
       // hide the outter container
    }
    function removeBroken(){
       // remove broken images like upper answer
    }
    function showContainer(){
       // you guessed
    }
    $.when(hideContainer()).done(removeBroken).done(showContainer);
}

如果您想这样做一次，那么用户看不到任何动态删除的内容，您将不得不在服务器端执行此操作。

在显示之前检查损坏的外部图像错误

2 个答案: