Load images after page load

Question

I have a problem with image loading. I tried to use load(), but it didn't work:

$().load('/wp-content/uploads/--/--/image1.jpg');
$().load('/wp-content/uploads/--/--/image2.jpg');
$().load('/wp-content/uploads/--/--/image3.jpg');

I wrote js slider which change background in div.
Images are quite big (more than 100kB). I change background every 10 sec. And when I go to this website for 1st time, every time background is changing it's blank space while loading image, until all images were used as background.

How can I load images using jquery so even if I view the website for 1st time browser would load those images from cache.

Update

Slider change div background: $(this).css("background-image","image.jpg");, so I cant use append, i cant use <img src="' + image[i] + '" .. />. I just want to load images to cache, so when I background will change, image will be already loaded.

http://stackoverflow.com/questions/476679/preloading-images-with-jquery — Ryan, Jun 12 '13 at 12:47

score 2 · Answer 1 · answered Jun 12 '13 at 12:50

2

You can have an array of image names, and append them after the page has loaded...

$(document).ready(function() {
    var images = ["img/image-1.jpg", "img/image-2.jpg"];
    for(var i = 0; i < images.length; i++) {
        $("#slider-selector").append("<img src=\"" + images[i] + "\" />");
    }
});

answered Jun 12 '13 at 12:50

Joshua Smickus

1,011
10
14

append the images and then remove them after they've been appended... so if you apply them to a hidden element then remove that element on page load – Joshua Smickus Jul 31 '13 at 13:03

Load images after page load

1 Answers1