考虑以下(脆弱的)JavaScript代码:
var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data
// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );
// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };
问题
onload调用回调(在src更改后设置)？实验测试
我创建了一个具有类似代码的简单测试页面.在Safari我的第一次测试,都是由本地打开HTML网页(file:///URL),并从我的服务器加载它,结果显示一切工作:高度和宽度是正确的,在画布上绘制的作品,并且在onload还火.
在Firefox v3.6(OS X)中,启动浏览器后加载页面显示设置后高度/宽度不正确,drawImage()失败.(然而,onload处理程序会触发.)然而,再次加载页面会在设置和drawImage()工作后立即显示宽度/高度.Firefox似乎将数据URL的内容缓存为图像,并在同一会话中使用时立即可用.
在Chrome v8(OS X)中,我看到与Firefox相同的结果:图像不能立即使用,但需要一些时间从数据URL异步"加载".
除了实验证明上述哪些浏览器有效或无效之外,我真的很喜欢这些应该如何表现的规范的链接.到目前为止,我的Google-fu还没有完成任务.
安全玩耍
对于那些不明白为什么上面可能有危险的人,要知道你应该使用这样的图像是安全的:
// First create/find the …我们在工作中遇到一个奇怪的问题,只发生在chrome中.看起来css文件正在缓存,并且不会重新下载此文件的内容.
问题是当使用新会话例如"私人会话"时,不会显示图像"mainSprite.png".
经过一些测试后,我认为如果用户未经过身份验证,问题与我们在开始时进行重定向有关.根据我的理解,它可能无法完成在css文件中链接的精灵的下载.它会尽快缓存无效对象作为重定向开始,然后在下面的页面时,将无法显示正确的图像,因为它的缓存有些不妥.
奇怪的是它实际上在某个时刻完全加载了图像.但它看起来并没有在内存中刷新它......
在第一次加载开始重定向并正确显示图像之前,我做了一秒的超时.这是一个快速修复,我不能指望每台计算机在1秒钟内加载css中包含的每个图像.
编辑
据我所知,它看起来真的像竞争条件.我改变了加载顺序.我们使用require.js.我没有在css之后加载js,而是在之前启动js加载.现在,我的本地服务器上的图像正确加载.
如果有人有兴趣研究它:
编辑2
当图像不可见时,打开新标签会出现同样的问题.关闭浏览器并重新打开它将在首次加载时工作,图像不会被下载,而是从Cache加载,这意味着在关闭浏览器之前,图像确实已下载.
HTML
<div id="background">
<img src="#" alt="Background Image" class="first"/>
<img src="#" alt="Background Image" class="second"/>
</div>
我没有添加SRC,因为它会减少我的页面的加载时间.(演示)
JQuery的
var current = "first";
window.setInterval(function() {
if(current == "first") {
$("#background .second").prop("src", getMessage());
setTimeout(function(){
$("#background .second").animate({
opacity: 1
}, 1000);
$("#background .first").animate({
opacity: 0
}, 1000);
},1000);
current = "second";
} else if (current == "second") {
$("#background .first").prop("src", getMessage());
setTimeout(function(){
$("#background .first").animate({
opacity: 1
}, 1000);
$("#background .second").animate({
opacity: 0
}, 1000);
},1000);
current = "first";
}
getMessage()
}, 5000);
所以我有一个带有src链接到我的图像的数组,这些数据是随机选择的function …
因为我的客户端页面有大量的Javascript,我在移动版本顶部添加的图像轮播需要永远在智能手机上呈现.我想加载轮播图像然后转盘所需的文件(jQuery,carousel JS文件,carousell CSS文件)之前的任何其他包括JS,CSS等.
是否有可能,如果可以的话怎么做？