Javascript 是否'；加载'；img 302重定向时调用事件？如何对此进行测试？

我认为浏览器在加载图像得到的第一个HTTP响应上调用了“加载”事件（只要不是500或其他错误代码）

比如说

Img url返回临时移动的302

浏览器错误地调用img标记上的“加载”事件

发出第二个HTTP请求，获得200个成功

图像现在已实际加载

有人知道这方面的测试方法吗

---

也许我会深入研究浏览器代码。

我错了，也糊涂了

加载事件在javascript上下文中正确发生

问题在于浏览器如何处理302的图像、缓存和CSS转换

比如说,， 如果在加载图像时调用不透明度CSS转换，每个浏览器将以不同的方式处理它

Chrome会在缓存的302'd图像上创建过渡 无论缓存如何，Firefox都会在所有302'd图像上进行转换 Safari可以完美地处理转换，而不管HTTP状态或缓存如何

请参见此处的演示：

JSFIDLE演示代码：

HTML:

一个潜在的演示是将添加css加载类的时间延迟100毫秒或更长，如下所示：

---

您可以在事件处理程序中放入一些代码，用于

load

事件，该事件只循环几秒钟。这将使浏览器冻结一段时间，以便您可以看到事件实际发生的时间。200和302图像都是在冻结脚本后加载的，因此似乎没有办法知道如何使用这种技术。我在IE中看到了这一点，但在Firefox中，这两个图像都是在冻结脚本之前加载的。由此得出的结论是，浏览器之间的行为不同，因此您不能依赖于以一致的方式调用的事件。请在onload事件顶部检查this.height，如果没有更改，“return setTimeout（arguments.callee.bind（this），25）；”；

<figure></figure>
<div>
    <button id="withCache">Load with image cache</button><br/>
    <button id="withoutCache">Load with no image cache</button>
</div>
<pre>
Loads will alternate between loading a 200 success and a 302 redirect of the same image
When imagesLoaded determines an img isLoaded, 
a class is added and the opacity transition should begin.

On Chrome, After the first "cycle" with image cache, 
cached image buggyness becomes apparent as CSS transitions on the 302 redirect are jittered.

On Firefox, in both cache situations, 302 redirects are still bugged.
This implies Firefox uses the cached image from the 2nd HTTP request.

In Safari, transitions work perfectly regardless of cache or HTTP status.
</pre>

var good200 = $('<img src="https://24.media.tumblr.com/tumblr_lsoemgev4A1qh6npeo1_1280.jpg">');

var bad302 = $('<img src="http://www.tumblr.com/photo/1280/lesfascinations/11273750776/1/tumblr_lsoemgev4A1qh6npe">');

var now = Date.now();

var caption = $("<figcaption></figcaption>");

var is302 = false;
var withCache = false;

// 1.  Click a button
$('button').click(function (e) {
    withCache = $(this).is("#withCache");

    now = Date.now();
    $('figure').empty();

    setTimeout(insertImage, 0);
});

// 2. Insert alternating 302/200 img
var insertImage = function () {
    $('figure').html(is302 ? get302img() : get200img());
    setTimeout(runImagesLoaded, 0);
}

// 3.  Run imagesLoaded script
var runImagesLoaded = function () {
    $('figure').imagesLoaded().progress(function (instance, item) {
        if (item.isLoaded) {
            $(item.img)
                .closest('figure')
                .append(
            caption.clone().text('imagesLoaded: ' + (Date.now() - now) + "ms")).append(is302 ? '302 redirect' : '200 success');

            setTimeout(addLoadedClass($(item.img)), 0);

            //alternate 302 and 200 img requests
            is302 = !is302;
        }
    });
}

// 4.  Add loaded class to img when it is loaded
var addLoadedClass = function (el) {
    el.addClass("loaded");
}

var get302img = function () {
    var img = bad302.clone();
    if (!withCache) appendRandomParam(img);
    return img;
}

var get200img = function () {
    var img = good200.clone();
    if (!withCache) appendRandomParam(img);
    return img;
}

var appendRandomParam = function (img) {
    var timestamp = Date.now();
    img.attr("src", img.attr("src") + "?" + timestamp);
}

img {
    width: 100px;
    transition: opacity 2s;
    -moz-transition: opacity 2s;
    -webkit-transition: opacity 2s;
    -o-transition: opacity 2s;
    opacity: 0;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    -o-opacity: 0;
}
img.loaded {
    opacity: 1;
    -moz-opacity: 1;
    -webkit-opacity: 1;
    -o-opacity: 1;
}
figure {
    float: left;
}
figcaption {
    text-align: center
}
pre{
}
}