Loading images in order

Jeffrey J Katz's Avatar

Jeffrey J Katz

15 Sep, 2019 06:12 PM

Is there a way to load images in the order they are going to display.

  1. Support Staff 1 Posted by Dmitry Semenov on 15 Sep, 2019 07:14 PM

    Dmitry Semenov's Avatar

    Hello,

    Can you please elaborate a bit more? Images already load at the order of your HTML markup.

  2. 2 Posted by Jeffrey J Katz on 18 Sep, 2019 09:47 PM

    Jeffrey J Katz's Avatar

    Hi Dimiti,

    Have you seen the response I posted?

    Thanks!

  3. Support Staff 3 Posted by Dmitry Semenov on 19 Sep, 2019 04:24 PM

    Dmitry Semenov's Avatar

    Hello Jeffrey,

    No, I haven't seen any. Where did you post it?

  4. 4 Posted by Jeffrey J Katz on 19 Sep, 2019 08:24 PM

    Jeffrey J Katz's Avatar

    I posted on the here on the help page. Instead of putting code in text, I will attach as file. My issue is that pictures are loading into the slider out of html order. Note, the images are on another server. Any advice?

  5. Support Staff 5 Posted by Dmitry Semenov on 20 Sep, 2019 05:01 AM

    Dmitry Semenov's Avatar

    Please link to the page with the issue. I tried re-creating slider with the same options and markup as yours and haven't found anything special.

    Except your thumbnails use very large images, for example - http://cdn.photos.sparkplatform.com/fl/20190830133009655262000000-o... , and they're all loaded right away.

  6. 6 Posted by Jeffrey J Katz on 20 Sep, 2019 01:08 PM

    Jeffrey J Katz's Avatar

    The page is: http://www.jeffreyjkatz.com/idx/RX-10558479-Four-Seasons-Delray-Beach-FL

    1. I see I should fix the thumbnail size but can that be effecting the order of load?
    2. Also not sure why the thumbnails are loading right away as the code has them loading thumbnail then image then thumbnail etc

    Thanks!!

  7. Support Staff 7 Posted by Dmitry Semenov on 21 Sep, 2019 09:00 AM

    Dmitry Semenov's Avatar

    The plugin does not lazy-load thumbnails, and since they're img elements initially - browser starts loading them before the first image.

    You can fix this by changing the markup of the first slide (and maybe 2nd and 3rd) to IMG elements too, via markup like:

    <img class="rsImg" src="image.jpg" data-rsTmb="small-image.jpg" alt="image description" />
    

    And you should definitely serve appropriately sized thumbnails (which are 96x72px in your case).

  8. 8 Posted by Jeffrey J Katz on 21 Sep, 2019 02:42 PM

    Jeffrey J Katz's Avatar

    Thank you. I will implement changes and let you know. Appreciate your help!!!!!

  9. 9 Posted by Jeffrey J Katz on 05 Oct, 2019 02:39 AM

    Jeffrey J Katz's Avatar

    I had my developer make some changes. I am now loading smaller thumbnails. I am still getting the issue where the thumbnail shows in the top left corner of main picture area. Also, the thumbnails are all loading before the first main picture shows. Am I able to make Royal Slider:

    First, pre-load one picture
    Second load all thumbnails
    Third load remainder of pictures.

    Here is a copy of a page showing the slider: http://70.39.151.100/idx/RX-10558334-VALENCIA-COVE-Boynton-Beach-FL

  10. Support Staff 10 Posted by Dmitry Semenov on 05 Oct, 2019 10:32 AM

    Dmitry Semenov's Avatar

    As I recommended earlier, make sure that the first slide is IMG element, not A, so instead of:

    <a class="rsImg" href="large.jpg"><img width="96" height="72" class="rsTmb" src="thumb.jpg"/></a>
    

    use

    <img class="rsImg" src="large.jpg" data-rsTmb="thumb.jpg" alt="" />
    

    This way browser will load a large image before the thumbnail (since the thumbnail is loaded only after JS is executed).

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac