我想弄清楚为什么这个 jQuery 在 Chrome 和 IE 中运行良好,但在 Firefox 中却不行。它应该做的(并且在 chrome 和 IE 中做的)是遍历 ul 中的每个 li 并查看 IMG src 是否抛出错误。如果是这样,li 将被删除。
$('ul.community-properties li').each(function() {
$('li IMG').on('error', function() {
$(this).parent().remove();
});
});
我也试过
$('ul.community-properties li').each(function() {
$('li IMG').error(function() {
$(this).parent().remove();
});
});
如果有人有更有效的方法或方法让它在所有浏览器中工作,那就太好了。
这是html结构
<ul class="community-properties">
<li>
<img src="{tag_community property1_value}" />
<div class="item-link"><a href="{tag_community property1 url}">View Property Details</a></div>
</li>
<li>
<img src="{tag_community property2_value}" />
<div class="item-link"><a href="{tag_community property2 url}">View Property Details</a></div>
</li>
<li>
<img src="{tag_community property3_value}" />
<div class="item-link"><a href="{tag_community property3 url}">View Property Details</a></div>
</li>
<li>
<img src="{tag_community property4_value}" />
<div class="item-link"><a href="{tag_community property4 url}">View Property Details</a></div>
</li>
</ul>
最佳答案
检查图像是否已经加载
window.setTimeout( function() { //added delay to make sure that onerror already has run.
$('ul.community-properties li img').one('error', function() { //bind the error event to the images
$(this).parent().remove();
}).filter( function() { //check to see if an image was loaded from the cache as broken (or if onerror fired before set)
return (this.complete && (this.naturalWidth===0 || this.naturalWidth===undefined));
}).trigger("error"); //fire the error event
},1000); //Broken images should hide after one second
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="community-properties">
<li>
<img src="{tag_community property1_value}" />
<div class="item-link"><a href="{tag_community property1 url}">View Property Details</a></div>
</li>
<li>
<img src="http://i.imgur.com/UyY6HH5.gif" />
<div class="item-link"><a href="{tag_community property2 url}">View Property Details</a></div>
</li>
<li>
<img src="{tag_community property3_value}" />
<div class="item-link"><a href="{tag_community property3 url}">View Property Details</a></div>
</li>
<li>
<img src="{tag_community property4_value}" />
<div class="item-link"><a href="{tag_community property4 url}">View Property Details</a></div>
</li>
</ul>
关于javascript - Jquery error() 在 chrome 和 IE 中工作,但在 firefox 中不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27512780/