Internet Explorer 10未读取jQuery函数

Question

我有一个jQuery加载函数，用于使用alt标记数据创建和添加after图像。它适用于所有浏览器和IE9，只是不适用于IE10，我不知道为什么。

这是jQuery代码：

$("img.caption").load(function () {
var imageCaption = $(this).attr("alt"); 
if (imageCaption != '') {
var imgWidth = $(this).width();
$("<figcaption class='img-caption'><em>" + imageCaption + "</em></figcaption>").css({ "position": "relative", "bottom": 0, "left": 0, "width": imgWidth + "px" }).insertAfter(this);
}
var figcaptionHeight = $('.img-caption').outerHeight();
$('.img-caption').css('margin-top', -(figcaptionHeight + 2));
});

我甚至尝试过使用其他标签，但根本没有回应。

这是HTML标记：

<figure>
<img class="caption" alt="caption text" /> 
</figure>

Answer 1

如果您要做的是为页面HTML中指定的图像挂起加载事件，那么使用javascript无法可靠地做到这一点。这是因为一些图像(尤其是浏览器缓存中已经存在的图像)可能会在JS运行之前和安装事件处理程序之前加载，因此您永远不会收到加载事件的通知。

在某些版本的IE中，这尤其是一个问题。

如果没有为图像标记指定.src属性，也不会得到.load()事件，因为load事件的全部目的是在图像URL加载完成时通知您。

假设您正在指定一个.srcURL，那么有几种可能的解决方案：

1. 将onload处理程序放入HTML中，因为这些处理程序将从一开始就就位
2. 当你的JS运行时，检查你所有的图片，看看是否有一些已经完成加载。您可以立即处理这些处理程序，然后在尚未完成加载的处理程序上安装.load()处理程序

下面是选项#2的一个示例，您可以在其中检查图像是否已经加载，如果已经加载，则立即处理它，否则等待load事件：

$("img.caption").each(function() {
function processImage() {
var imageCaption = $(this).attr("alt"); 
if (imageCaption != '') {
var imgWidth = $(this).width();
$("<figcaption class='img-caption'><em>" + imageCaption + "</em></figcaption>").css({ "position": "relative", "bottom": 0, "left": 0, "width": imgWidth + "px" }).insertAfter(this);
}
var figcaptionHeight = $('.img-caption').outerHeight();
$('.img-caption').css('margin-top', -(figcaptionHeight + 2));        
}
// if image already loaded, process it now
if (this.complete) {
processImage.call(this);
} else {
// wait for it to be loaded
$(this).load(processImage);
}
});

Answer 2

IE可能不喜欢$("img.caption")，而只尝试$(".caption")