CODEWITHSUNDEEP
jqueryload
miszczu
miszczu

Reputation: 1189

Load images after page load

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.

Upvotes: 0

Views: 2917

Answers (1)

user632287
user632287

Reputation:

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] + "\" />");
    }
});

Upvotes: 2

Related Questions