Internet Explorer 10 不读取 jQuery 函数

Question

我有一个 jQuery 加载函数，可以使用 alt 标记数据创建和添加后图像。它适用于所有浏览器和 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 完成加载时通知您.

假设您指定的是.src URL，有几种可能的解决方案：

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")