jQuery鼠标悬停检测外部图片存在性：首次触发显示异常排查

兄弟，你猜的完全没错！问题的核心就是图片加载的异步特性——你刚给image.src赋值就立刻去读取image.width，这时候外部图片还在网络请求加载中，所以第一次拿到的宽度肯定是0，自然触发了默认图的逻辑；第二次悬停时，图片已经被浏览器缓存了，加载瞬间完成，width就能正常获取，所以显示正常图片。

为什么原代码失效？ #

当你执行image.src = urllink时，浏览器会异步发起图片加载请求，这个过程不会阻塞后续代码执行。所以紧接着的var imagewidth = image.width拿到的是图片元素的初始默认值0，而非实际加载后的宽度，导致第一次判断错误。

正确的解决方案：利用图片的加载事件 #

图片元素自带onload（加载成功）和onerror（加载失败）事件，这是判断外部图片是否存在最可靠的方式，而且不受跨域限制（图片资源的跨域加载是浏览器允许的，不像AJAX请求会被CORS拦截）。

修改后的代码如下：

var image = new Image();
// 图片加载成功时，设置目标图片
image.onload = function() {
  $('#cardpicture').attr('src', urllink);
};
// 图片加载失败（比如不存在、404）时，显示默认图
image.onerror = function() {
  $('#cardpicture').attr('src', '../noimg.png');
};
// 最后再设置src，确保事件绑定完成后再触发加载
image.src = urllink;

补充说明 #

• 为什么AJAX HEAD方法不行？因为跨域情况下，浏览器的同源策略会拦截AJAX请求，除非目标服务器配置了允许你域名访问的CORS响应头，而图片资源的加载不受这个限制，所以用图片自身的加载事件是最优解。
• 如果你担心重复加载图片，可以在悬停事件里做个简单的缓存判断，比如记录已经检测过的图片URL状态，避免重复发起请求。

内容的提问来源于stack exchange，提问作者hillcode