16

I'm using the excellent Nivoslider plugin to showcase a set of photos on my homepage, currently 5. All is working fine, but each photo adds about 150K to the page weight. I would actually want to showcase about 10 "slides", but since all these images are preloaded at the opening of the page, the page weight will soon become (too) large, especially since many users will likely not wait for the "show" to finish.

I was wondering if it is possible to not preload images, or beter, only x images ahead. I can't find anything about it in the documentation, so I presume it is not natively supported. Any ideas?

Fer
  • 4,116
  • 16
  • 59
  • 102

6 Answers6

20

I've been looking for a similar solution. I have an image gallery on a web site that loads a dozen high-quality images on the home page using a slideshow plugin. And all these images are being loaded at once adding 2-3 megs to the page weight. No dice.

Nivo leaves image handling up to the browser. It reads the <img src="..."> tag and then gussies up the images into a slideshow with slick transition effects. There's nothing in code to control the loading or preloading of images.

Fortunately Nivo is on Github. So I forked it to support lazy loading of images:

https://github.com/leepowers/Nivo-Slider

The usage is the same. With one small change to the HTML

<div id="slider">
 <img src="my-large-image.jpg" alt="">
 <img src="my-large-image2.jpg" alt="">
 <img src="another-biggun.jpg" alt="">
</div>

Change the image src attributes to data-src attributes:

<div id="slider">
 <img data-src="my-large-image.jpg" alt="">
 <img data-src="my-large-image2.jpg" alt="">
 <img data-src="another-biggun.jpg" alt="">
</div>

Since data-src is not parsed the images aren't loaded until Nivo is ready to use them. data-src has precedence over src which means you can specify low-res versions in src for non-javascript users, or populate src with a spacer image so the HTML will pass a validator.

Check it out! I'm implementing it on several projects. A demo is available here: http://powers1.net/files/nivo/demo/demo-lazy.html

leepowers
  • 37,828
  • 23
  • 98
  • 129
  • Wow that looks so promising, thanks! I'm going to testdrive this in the coming days, I'll get back to you with the results. – Fer Apr 05 '12 at 09:39
  • 1
    Got it working on dev, I'll grant you the correct answer and will credit you on my blog once I go live with this part. Once again, awesome work! – Fer Apr 05 '12 at 18:17
  • Github link is broken – Akshay Hegde Jun 24 '18 at 03:23
1

Nivo slider does not have an image preloader. If you are using your slider with jQuery load event(as in demos of nivo), nivo slider will wait until all images loaded in page. 

$(window).load(function() {
        $('#slider').nivoSlider();
});

If you do not want to wait until all images loaded you might prefer document ready event as below. No images will be preloaded.

$(document).ready(function() {
   $('#slider').nivoSlider(); 
});

If you want to have a controlled preloading; You may use one of image preload plugins of jQuery like; http://www.farinspace.com/jquery-image-preload-plugin/

$(document).ready(function() {
   $('#slider').nivoSlider(); 
   //Before starting the slider preload your images then start your slider.
   $.imgpreload(['/images/a.gif','/images/b.gif'],
   {
    all: function()
    {
       //Start slider here
    }
   });
});
burak altundal
  • 714
  • 5
  • 9
  • Please read the question. Preloading is the problem, not the solution. – Fer Apr 05 '12 at 09:38
  • 1
    If you use document ready event preloading is optional, you can just directly start the slider. In that case no images will be preloaded. My example shows, if you want to use preloader with your own limits, you can. I will update the example. – burak altundal Apr 05 '12 at 11:21
0

you can create a function to put the images in a array and preload 

jQuery.preloadImages = function() {   
 for(var i = 0; i<arguments.length; i++)   
{
      jQuery("<img>").attr("src", arguments[i]);   
}

}

and for use the function, provide an array of image urls :

$.preloadImages("test.png", "/imageUrl");
lolweb
  • 95
  • 1
  • 1
  • 5
  • 2
    I'm sorry, but the question is not to preload images. Preloading is the problem, not the solution. In this case they should be lazy loaded. – Fer Apr 04 '12 at 17:58
0

What if by default on page load, you initialise the slider with a subset of the images. Following which you dynamically create the images using jQuery and re-initialise the slider? See the following for an example using an ajax call.

Nivoslider update or restart or even destroy

Community
  • 1
  • 1
trickyzter
  • 1,591
  • 13
  • 9
  • Thanks for thinking along, looks like a creative idea. Having said that, I am increasingly thinking that I should simply switch to another plugin if it requires this amount of tinkering :) – Fer Apr 05 '12 at 09:37
  • @Ferdy The idea is simple enough, if you would like me to produce a sample based on your own code, I wouldn't mind. – trickyzter Apr 05 '12 at 11:28
0

The answer from Burak is fine for me, but it does not work in Safari. I tried to modify and this is my solution:

$(window).ready(function() {
   $('#slider').nivoSlider();

It works properly in Safari, IE and Firefox. Of course, you can add the controlled preload.

jonsca
  • 10,218
  • 26
  • 54
  • 62
jajani
  • 1
-1

You can hide the #slider until the page loads and then load the div.

  1. Append display:none; to the #slider in your CSS file.

  2. Add $('#slider').css('display','block'); in your $(window).load(function() {..}); along with your existing code, so it becomes:

    $(window).load(function() {
    $('#slider').css('display','block');
});
Bo Persson
  • 90,663
  • 31
  • 146
  • 203
Noor
  • 1
  • Thanks for the answer, but this does not solve the original problem. This suggestion will delay the loading of the slider as a whole, whilst what I want is for the slider to load yet the images to be lazy loaded. – Fer Sep 13 '11 at 15:39