pre load images using jquery from flickr api

Question

I'm calling a random image from flickr api.

now it's working but user need to wait for image to download, how can I do a preload of next image so user will see the image right away. I need to preload just the next image each time,this is my code:

$(document).ready(function(){

    $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
    {
        //tags: keyword,
        tagmode: "any",
        format: "json"
    });


    var loadNewImage = function() {
      var rnd = Math.floor(Math.random() * data.items.length);
      var image_src = data.items[rnd]['media']['m'].replace("_m", "_b");
      $('.main').css('background-image', "url('" + image_src + "')");
    }

    var imageInterval = 10000;
    setInterval(loadNewImage(), imageInterval);

});

Answer 1

一种方法是将隐藏的img插入文档并处理其onload事件。