Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Pre-loaded images not displaying in Chrome

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?

like image 374
David Yell Avatar asked Mar 18 '11 16:03

David Yell


People also ask

How do I fix browser images not showing?

Therefore, if you have disabled JavaScript on your browser, then it might not show your images. If you want to resolve the images not showing problem due to this, then just go to Chrome's Settings > Privacy and Security > Content and select the JavaScript feature.

Why are pictures on websites not showing up?

Possible causes. The web page is not pointing to the correct URL (location) of the image. The server or computer hosting the image has moved or removed the image, and the web page has not yet been updated. The web page or computer hosting the image is getting too many requests and can't send you the image.

Why are my thumbnail images not showing Chrome?

Enable The New Tab Page Flag In the Chrome local search bar, type in local ntp. From the results that show up, choose Enabled option from the drop down menu associated with Use the WebUI new tab page when opening a new tab. Relaunch Chrome and check if the shortcut thumbnails are coming fine or not.


1 Answers

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.

like image 184
Tom Gullen Avatar answered Oct 14 '22 02:10

Tom Gullen