lazy loading images without rs calculations

Serdar Akkılıç's Avatar

Serdar Akkılıç

05 Oct, 2016 01:54 PM

Hey,
Sorry i don't have any idea what to put as a title for this issue.

Basically I want to use the slider's lazy loading future inside html slides.

Normally .rsImg classed images are being processed/calculated according to slider's own options. I personally handle the responsive issues with css. I don't want my images width and height getting touched by slider's own responsive calculations. To do this, i have to remove .rsImg class. But this prevent lazy loading future.

i solve the issue by using "!important" css. However RoyalSlider still calculates width, height and margin stuff.

May be there should be another class like "rsDontTouch" which can be also added to .rsImg to prevent automatic calculations done to images while still taking advantage of lazy loading future which will improve the slider performance on such issues. This may also improve flexibility.

with this we can have complex html structures with multiple different sized images responsively handled by css and has lazy loading.

  1. Support Staff 1 Posted by Dmitry Semenov on 05 Oct, 2016 02:56 PM

    Dmitry Semenov's Avatar

    Hello,

    Check this reply - http://help.dimsemenov.com/discussions/problems/65384-responsive-im... , there is JS fiddle example on how to lazy-load responsive image.

    Dmitry

  2. 2 Posted by Serdar Akkılıç on 05 Oct, 2016 03:37 PM

    Serdar Akkılıç's Avatar

    Hello Dmitry,
    Thanks for the response. Your example still put JavasScript calculations into work.

    We actually don't need this calculations most of the time to create responsive layouts. I understand the slider's main purpose. My request was for advanced layouts which all responsive designing, positioning already being handled by css.

    very simple example: https://codepen.io/serdarakkilic/pen/mApwmd
    on this example i don't need any javascript calculations for my layout to make it responsive. all of my images, even container is handled by css.

    imagine my every rsContent elements are like this example and I need lazy loading images. Instead of writing external lazy load functions, I want to be able to use the royalSlider's built in lazy loading future. if i use .rsImage class with anchor elements all of the images on the layout will be handled by royalSlider. The layout will break and i need to fix it with even more css which uses !important definitions which are not recommended for performance. While even royalSlider tries to do the calculations even it hits the performance more.

    What i need is just a "don't touch my images but lazy load them" class or an option on initialization of the slider.

  3. Support Staff 3 Posted by Dmitry Semenov on 05 Oct, 2016 03:46 PM

    Dmitry Semenov's Avatar

    What i need is just a "don't touch my images but lazy load them" class or an option on initialization of the slider.

    Add imageScaleMode:'none', imageAlignCenter:false and slider won't apply sizing to images.

    Also, the example at http://jsfiddle.net/DmitrySemenov/danpsx91/ does exactly that - it doesn't modify styling of images, it just lazy-loads them. If you don't need srcset, you may just cut this part from it.

  4. 4 Posted by Serdar Akkılıç on 05 Oct, 2016 03:47 PM

    Serdar Akkılıç's Avatar

    That is what i needed.
    Thank you very much for the quick response

  5. Serdar Akkılıç closed this discussion on 05 Oct, 2016 03:56 PM.

Comments are currently closed for this discussion. You can start a new one.

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