& # 39;负载# 39;事件在img 302重定向中被调用?如何测试这个

Does 'load' event get called on img 302 redirects? How to test for this?

本文关键字：何测试 测试 事件 负载 img 重定向 调用      更新时间：2023-09-26

我认为浏览器在加载图像(只要不是500或其他错误代码)获得的第一个HTTP响应上调用"load"事件

例如

  1. Img url返回302临时移动
  2. 浏览器在img标签上错误地调用"load"事件
  3. 第二次HTTP请求成功，返回200
  4. 图像现在实际加载

有人知道测试这个的方法吗?

我错了，我很困惑。

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

问题是浏览器如何处理302d图像，它的缓存和CSS过渡。

例如,

如果你在图片加载时调用不透明CSS过渡，每个浏览器将以不同的方式处理它。

Chrome在缓存的302图像上工作转换Firefox会在所有302d图像上进行转换，而不考虑缓存无论HTTP状态或缓存如何，Safari都能完美地处理转换。

请看下面的演示:http://jsfiddle.net/2TCy4/33/

jsfield演示代码:

HTML: 

<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>
Javascript: 

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);
}
CSS: 

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{
}
}

一个潜在的演示是延迟添加css加载类100毫秒或更多，如下所示:http://jsfiddle.net/2TCy4/34/

相关文章：