预先加载的图片不会在Chrome中显示 [英] Pre-loaded images not displaying in Chrome

问题描述

我预加载了一些图片，然后在Lightbox中使用它们。我遇到的问题是，尽管图像正在加载，但它们并未被浏览器显示。

这个问题是针对Chrome的。它一直坚持通过Chrome 8 - 10，我一直在尝试着去解决这个问题，并且一无所获。

我已经阅读过这些类似的问题，

Chrome不是显示图像，虽然资产正在交付给浏览器

2小Crossbrowser CSS问题。 Google Chrome中不显示背景图片？


JavaScript预加载的图像正在重新加载

其中所有细节都类似于Mac版Chrome中的行为。而这在Windows中发生。

• 所有其他浏览器似乎都没有问题。


• 如果您打开Firefox和Chrome，在Firefox中的页面，然后在Chrome中显示图像。


• 使用Webkit webdev工具栏thingy手动加载图像后，它们将始终显示


• 所有图片链接都很好，很有效


• 清除Chrome中的所有内容似乎没有什么区别（缓存，历史记录等）





如果任何人有任何想法，这将是非常有帮助的，因为我在这里完全没有选择。



，抱歉，如果有迟到的回复，我明天就休假一周！ ：D



更新
以下是预先加载图片的javascript函数。

  var preloaded = new Array（）; 
函数preload_images（）{
 for（var i = 0; i< arguments.length; i ++）{
 document.write（'<'）; 
 document.write（'img src = \''+ arguments [i] +'\style = \display：none; \>'）; 
}; 
}; 
  

更新

我仍​​然遇到问题与此，我已经删除了整个预加载图像功能。也许通过 document.write（）传递一个样式表不是最好的方法吗？


解决方案

Chrome可能不会预加载它们，因为它没有显示，因此它可以写入到DOM中，所以它可能足够智能以实现它不需要渲染。试试这个：

  var preloaded = new Array（）; 
 
函数preload_images（）{
 for（var x = 0; x 
 {
 preloaded [x] = new图片（）; 
 preloaded [x] .src = preload_images.arguments [x]; 
 
 
  

Javascript Image对象具有许多有用的功能，如那么你可能会发现有用：



http： //www.javascriptkit.com/jsref/image.shtml




onabort（）



当用户中止图像的
下载时执行代码。





onerror ）



在发生错误
时加载图像（即：未找到
）时执行代码。示例（s）



onload（）






成功并完全下载。




然后您还有完整 true / false属性告诉你图像是否完全（预装）。




I am pre-loading some images and then using them in a lightbox. The problem I have is that although the images are loading, they aren't being displayed by the browser.

This issue is specific to Chrome. It has persisted through Chrome 8 - 10, and I've been trying on and off to fix it all this time and have got nowhere.

I have read these similar questions,
Chrome not displaying images though assets are being delivered to browser
2 Minor Crossbrowser CSS Issues. Background images not displaying in Google Chrome?
JavaScript preloaded images are getting reloaded

Which all detail similar behaviour but in Chrome for Mac. Whereas this is happening in Windows.

• All other browsers seem to be fine.
• If you have Firefox and Chrome open, load the page in Firefox, and then in Chrome, the images appear.
• Once you have manually loaded the images, using the Webkit webdev toolbar thingy, they always show up
• All the links the images and such are fine and working
• Clearing everything from Chrome doesn't seem to make any difference (cache, history, etc)

If anyone has any ideas it would be fantastically helpfull, as I'm literally all out of options here.

PS, Apologies if there are late replies, I'm off on holiday for a week tomorrow! :D

Update Here is the javascript function which is preloading the images.

var preloaded = new Array();
function preload_images() {
    for (var i = 0; i < arguments.length; i++){
        document.write('<');
        document.write('img src=\"'+arguments[i]+'\" style=\"display:none;\">');
    };
};

Update
I'm still having issues with this, and I've removed the whole preloading images function. Perhaps delivering a style sheet via document.write() isn't the best way?

解决方案

Chrome might not be preloading them as it's writing to the DOM with no display, so it might be intelligent enough to realise it doesn't need to be rendered. Try this instead:

var preloaded = new Array();

function preload_images(){
    for (var x = 0; x < preload_images.arguments.length; x++)
    {
        preloaded[x]     = new Image();
        preloaded[x].src = preload_images.arguments[x];
    }
}

The Javascript Image object has a lot of useful functions as well you might find useful:

http://www.javascriptkit.com/jsref/image.shtml

onabort()

Code is executed when user aborts the downloading of the image.

onerror()

Code is executed when an error occurs with the loading of the image (ie: not found). Example(s)

onload()

Code is executed when the image successfully and completely downloads.

And then you also have the complete property which true/false tells you if the image has fully (pre)loaded.

这篇关于预先加载的图片不会在Chrome中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！