CODEWITHSUNDEEP
javascripthtml
karaxuna
karaxuna

Reputation: 26930

Preloading images with javascript does not work

I'm trying to preload images with javascript:

$(document).ready(function () {
    preloadImages(
        ['../../Content/Resources/close_mouse_over.png',
        '../../Content/Resources/close.png']);
});

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i];
        }
    }

function mouseOverForImage(imgId, imgSrcs) {
        document.getElementById(imgId).src = imgSrcs;
    }

In Html:

<input type="image" src="../../Content/Resources/close.png" name="Action" value="Save" onmouseover="mouseOverForImage('close', '../../Content/Resources/close_mouse_over.png')" 
               onmouseout = "mouseOverForImage('close', '../../Content/Resources/close.png')" id="close" title = "Close" />

But request is still sending to server after mouseover. Is not working only in chrome

Upvotes: 2

Views: 1439

Answers (1)

Gavin
Gavin

Reputation: 6394

As noted within my comment, you are passing an array of arrays to the preLoadImages method.

As a result, you are passing an array to image[i].src which means it won't get loaded.

Try

$(document).ready(function () {
    preloadImages(
        ['../../Content/Resources/close_mouse_over.png', '../../Content/Resources/close.png']);
});

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i];
        }
    }

function mouseOverForImage(imgId, imgSrcs) {
        document.getElementById(imgId).src = imgSrcs;
    }

or, if you want to keep the array of array's, then use 

function preloadImages(sources) {
        var image = new Array();
        for (var i = 0; i < sources.length; i++) {
            image[i] = new Image();
            image[i].src = sources[i][0];
        }
    }

Edit, on further investigation, a possible cause is preloadImages destroys the image array after preloading the images.

try this instead:

function preloadImages(sources) {
    window.preloadedImages = new Array();
    for (var i = 0; i < sources.length; i++) {
        window.preloadedImages[i] = new Image();
        window.preloadedImages[i].src = sources[i];
    }
}

This stores the preloaded images within the window object, allowing them to preload properly.

Hope that helps?

Upvotes: 1

Related Questions