CODEWITHSUNDEEP
javascriptjqueryimagepreload
input
input

Reputation: 7519

Preloading images in jQuery gallery

I would like to use this gallery in my website. The only issue is that when clicking next to load the picture, it takes a lot of time. I would like to preload the next two images, when the user clicks the image to enlarge it.

I came across this solution but it's manually coding the image names, but my images are loaded dynamically. Is there any other way I can do it?

Upvotes: 1

Views: 1414

Answers (4)

Marvin3
Marvin3

Reputation: 6041

I recommend using this gallery - http://dimsemenov.com/plugins/royal-slider/gallery/ it does exactly what you need - preloads nearby images and you may set how much to preload. But note that it's commercial and costs around 10 bucks.

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78520

Here's a simple-ish solution. You can add a click event to the thumbs so that when one is clicked it preloads the next three images. Some way of preloading the next image once you are in individual image navigation would still have to be worked out though, but hopefully this will hep you get there..

$("#content img").on("click",function(){ // use .live instead if you are using an older version of jQuery
    var next = $(this).next();
    for (var i = 0; i < 3; i++)
    {
        var img = new Image();
        img.src = next.attr("alt");
        next = next.next();
    }
});

Upvotes: 1

deviousdodo
deviousdodo

Reputation: 9172

You can use the solution you mentioned, you just need to extract the src attribute of the gallery's images:

preload($('#gallery-images img').map(function() { return this.src; }));

This will actually call the preload function with the needed array.

Upvotes: 1

Jamie Hutton
Jamie Hutton

Reputation: 260

If your images are stored in a mysql you could use the solution you found with a few modifications adding a json encode from the sql query of image names. Passing the information onto jQuery for preloading

  require_once('JSON.php');
  $json = new Services_JSON();
  $out = $json->encode($query)

Upvotes: 0

Related Questions