Lazy load on start

emrekucukozkan's Avatar

emrekucukozkan

07 Jul, 2017 10:57 AM

Hello,

I am trying to load all the images with lazy load, I am using a href tags but they are converted to img tags. When first initialization all the images are loaded.

This is the script I am using;

<script> jQuery(document).ready(function($) { $(".vr_slider").royalSlider({ keyboardNavEnabled: true, controlNavigation:'none', loop: false, loopRewind: false, imageAlignCenter: true, autoScaleSlider: true, numImagesToPreload: 0, autoScaleSliderWidth:750, autoScaleSliderHeight:592, sliderDrag: true, allowCSS3: true, imageScaleMode: 'fill', arrowsNavAutoHide:false, usePreloader: true, transitionType:'fade', addActiveClass:true, transitionSpeed:500 }); }); </script>

And here how it looks like until images are loaded; Actually I am trying to get this functionality.

This is how I add lazy load;

<a href="image_url" class= 'rsImg'></a>

and how it looks like on console;

<img class="rsImg rsMainSlideImage" src="image_url" style="width: 336px; height: 266px; margin-left: 0px; margin-top: -1px;">

  1. Support Staff 1 Posted by Dmitry Semenov on 07 Jul, 2017 02:32 PM

    Dmitry Semenov's Avatar

    Hello,

    Not sure if I fully understand what you mean, how do you expect images to preload and show up wihout IMG element? Can you please link to the page that you're working on?

    Btw, on site that you linked numImagesToPreload option is set to 1, so slider preloads current image and nearby.

  2. 2 Posted by emrekucukozkan on 07 Jul, 2017 06:59 PM

    emrekucukozkan's Avatar
    1. Unfortunately, I can not share cuz I am working on my localhost for now. If you wish I can share all the code I am using. The problem is, my code looks like it is loading all the pictures even though I set it to lazy load. But at the link I shared, it seems only first image is loaded.

    2. The height becomes 0, I dont know why. I pus min-height as the link I shared. But then it becomes 150px then adjusts it self. What am I doing wrong?

    PS: I attached a folder with my html, js and css.

  3. Support Staff 3 Posted by Dmitry Semenov on 07 Jul, 2017 07:58 PM

    Dmitry Semenov's Avatar

    You may try recreating on jsfiddle, e.g. based on this one http://jsfiddle.net/DmitrySemenov/zyv60070/

  4. 4 Posted by emrekucukozkan on 07 Jul, 2017 09:54 PM

    emrekucukozkan's Avatar

    Thank you, jsfiddle solved my problem!

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • Ekran_Resmi_2017-07-07_13.53.01.png 13.9 KB

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