怪事一桩，放在一起的两个对象结果却不一样

[Leixian]

			<div class="slid">
				<ul id="sssss">
					<li><a>
						<img src="http://www.baidu.com" /></a></li>
					<li><a>
						<img src="http://www.baidu.com" /></a></li>
					<li><a>
						<img src="http://www.baidu.com" /></a></li>
					<li><a>
						<img src="http://www.baidu.com" /></a></li>
					<li><a>
						<img src="http://www.baidu.com" /></a></li>
				</ul>
				<ul class="slides" id="slider-box">
<li>
<a href="###"><img src="/a/image/20140709/20140709141875707570_thumb_b.jpg" alt="WRTF 士大夫阿斯顿士大夫阿三地方" /><p>WRTF 士大夫阿斯顿士大夫阿三地方</p></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141858555855_thumb_b.jpg" alt="搞活为人体岁的法国阿三地方阿三地方阿三地方阿三地方阿斯顿" /><p>搞活为人体岁的法国阿三地方阿三地方阿三地方阿三地方阿斯顿</p></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141749624962_thumb_b.jpg" alt="风格化的tyre他发给阿哥阿三地方士大夫" /><p>风格化的tyre他发给阿哥阿三地方士大夫</p></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141715461546_thumb_b.jpg" alt="2阿三地方阿道夫第三方士大夫电鼓豆腐干豆腐干豆腐干豆腐干的速度放缓" /><p>2阿三地方阿道夫第三方士大夫电鼓豆腐干豆腐干豆腐干豆腐干的速</p></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141671837183_thumb_b.jpg" alt="啊官方阿三地方士大夫阿斯顿" /><p>啊官方阿三地方士大夫阿斯顿</p></a></li>
</ul>
<ul class="slides_tabs" id="slider-pager">
<li>
<a href="###"><img src="/a/image/20140709/20140709141875707570_thumb_s.jpg" alt="WRTF 士大夫阿斯顿士大夫阿三地方" /></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141858555855_thumb_s.jpg" alt="搞活为人体岁的法国阿三地方阿三地方阿三地方阿三地方阿斯顿" /></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141749624962_thumb_s.jpg" alt="风格化的tyre他发给阿哥阿三地方士大夫" /></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141715461546_thumb_s.jpg" alt="2阿三地方阿道夫第三方士大夫电鼓豆腐干豆腐干豆腐干豆腐干的速度放缓" /></a></li>
<li>
<a href="###"><img src="/a/image/20140709/20140709141671837183_thumb_s.jpg" alt="啊官方阿三地方士大夫阿斯顿" /></a></li>
</ul>

				<script type="text/javascript">
					$(function () {
						alert($("#slider-box img").length); //可以
						$("#slider-box img").on("error", function () {
							alert(this.src); //这个死活都不可以
						});
						$("#sssss img").on("error", function () {
							alert(this.src); //这个可以
						});
					});
				</script>
			</div>

路径肯定都是错的，但有一个无论如何无返回结果

[xuzuning]

两处都不应该可以！ 你的事件绑定是在 window.onload 事件中进行的 页面加载完成，当然也包括其中图片加载完成。你对已经加载完成的 img 绑定 onerror 事件，怎么可能有效呢？ 就算是 img 加载是否完成不计算在 window.onload 中 那也必定有 window.onload 事件发生前就加载完成的图片 所以你预期的 onerror 事件的响应也不可能是完整的

[Leixian]

引用 1 楼 xuzuning 的回复:

两处都不应该可以！ 你的事件绑定是在 window.onload 事件中进行的 页面加载完成，当然也包括其中图片加载完成。你对已经加载完成的 img 绑定 onerror 事件，怎么可能有效呢？ 就算是 img 加载是否完成不计算在 window.onload 中 那也必定有 window.onload 事件发生前就加载完成的图片 所以你预期的 onerror 事件的响应也不可能是完整的

哦，你的意思是说在加载的时候在img标签中添加onerror事件吗？不能批量绑定吗？

[Nihn]

你是不是要对没有正确加载图片进行判断？ 网上找到如下代码：

<script type="text/javascript">
        $(function () {
            $('#slider-box img').each(function () {
                if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                    // image was broken, replace with your new image
                    this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
                }
            });
        });
    </script>

可以试一下。

[Leixian]

引用 3 楼 sahalasahara 的回复:

你是不是要对没有正确加载图片进行判断？ 网上找到如下代码：

<script type="text/javascript">
        $(function () {
            $('#slider-box img').each(function () {
                if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                    // image was broken, replace with your new image
                    this.src = 'http://www.tranism.com/weblog/images/broken_ipod.gif';
                }
            });
        });
    </script>

可以试一下。

谢谢！！这个可以，刚搜了一下naturalWidth 和 naturalHeight是HTML5专属的，我再测试其他浏览器~~~