首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在img 302重定向时会调用“load”事件吗?怎么测试这个?

在img 302重定向时会调用“load”事件吗?怎么测试这个?
EN

Stack Overflow用户
提问于 2014-06-01 22:19:16
回答 1查看 1.7K关注 0票数 0

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

例如

  1. Img url返回一个临时移动的302
  2. 浏览器错误地调用img标记上的“加载”事件
  3. 发出第二个HTTP请求,获得200次成功
  4. 现在实际加载了图像。

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

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

EN

回答 1

Stack Overflow用户

发布于 2014-06-02 16:18:25

我错了也很困惑。

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

问题是浏览器如何处理302'd图像、缓存和CSS转换。

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

Chrome能够在缓存的302'd图像上完成转换,Firefox可以在所有302'd图像上完成转换,而不管缓存Safari如何完美地处理转换,而不管HTTP状态还是缓存。

参见这里的演示:http://jsfiddle.net/2TCy4/33/

Jsfiddle演示代码:

HTML:

代码语言:javascript
运行
复制
<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:

代码语言: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:

代码语言:javascript
运行
复制
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 is或更多,如下所示:http://jsfiddle.net/2TCy4/34/

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23985098

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档