Search code examples
jqueryjssor

Using JJSOR with large gallery

A question related to this answer: Jssor slider - How do I destroy and recreate Jssor slider with different content. Suppose I have 500 images (50kb average) with thumbnails (about 2-3kb), evenly divided into 6 category.

Preloading all 500 images with thumbnails would take too long, the usual method would be to display the first set of images, at end of the first set, it would fetch the next set from server and recreate the slider with new contents.

Question: Where is the insertion point for this new UI ?

The reference API doesn't have any hooks to trigger a function when end of list is reached.

Solution

  • First approach, please try lazy loading. To make lazy loading work, please simply replace <img src="url" with <img src2="url"

    Second approach, as you mentioned above, you 6 categories of images. Load the first category at the beginning and load others on demand. And follow the following steps to recreate the slider dynamically.

    1. Clear content of the element 'slider1_container'.
    2. Fill new content in 'slider1_container'.
    3. [Optinal Step, you can ignore this step)] Please call $Pause (jssor_slider1.$Pause()) api to pause the old slider.
    4. And then use new $JssorSlider$(options); statement to create a new instance of jssor slider.