3

I have a div called #highlights which swaps article titles and illustrations. When I change to a new illustration using jQuery like this

$("#highlights").css("background","url("+path+")");

the background picture being set shows up slowly for the first time. How could I fix this?

j08691
  • 204,283
  • 31
  • 260
  • 272
Rápli András
  • 3,869
  • 1
  • 35
  • 55
  • You can get images into the cache by loading them into an image object first. – Tim Seguine Dec 16 '13 at 15:45
  • 1
    Have you looked into the use of Sprites? – Yogurt The Wise Dec 16 '13 at 15:48
  • Prerendering is something completely different from preloading. I myself am looking for a non-hacky way to prerender large images *that I have already preloaded*, but that make the browser lag when I try to display them. OP might have been after a way to preload images, but the title suggests otherwise. Not a dupe – Gust van de Wal Nov 07 '17 at 10:57

1 Answers1

8

You probably want to preload the images (courtesy of James):

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);
Community
  • 1
  • 1
SW4
  • 69,876
  • 20
  • 132
  • 137