我认为浏览器是在从加载图像获得的第一个HTTP响应上调用"load“事件(只要它不是500或其他错误代码)。
例如
有人知道测试这个的方法吗?
也许我会深入研究浏览器代码。
发布于 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:
<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 is或更多,如下所示:http://jsfiddle.net/2TCy4/34/
https://stackoverflow.com/questions/23985098
复制相似问题