how I can load on demand in jquery slider?

Question

I have been JQuery UI Slider with content and there are many images in div content, the slider works but it is so slow because it loads whole of div in the page loading. how I can set jquery ui slider to load on demand means when I click on the scroll or circle button.

all of the images are in the folder likes img. and I use this "http://jqueryui.com/demos/slider/#side-scroll".

Answer 1

You can load your image once the document has finished loading:

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
                      .load(function() {
                         if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                             alert('broken image!');
                         } else {
                             $("#something").append(img);
                         }
                      });

Source: Asynchronously load images with jQuery