Responsive image with srcset and preloading images

info's Avatar

info

19 Sep, 2016 01:36 PM

Hi Dmitry!

I'm trying to figure this out, but I'm stuck.

I have a page with a full screen size slider (http://www.douwehoendervanger.nl/) which is working well.

For responsive reasons, I'm using the srcset attribute with multiple image sizes so the browser can choose which image to load which fits best. My code:

<img srcset="480x319.jpg 320w, 640x426.jpg 480w, 960x639.jpg 640w, 1280x852.jpg 960w, 1920x1277.jpg 1280w, 3200x2129.jpg 1920w" src="1280x852.jpg" class="rsImg" />

But, the preloade function only preloads the default sizes, the 1280x852.jpg images... and all the other images are loaded.

Any idea how to change this? Specially on big screens where the big images are used it would be great of not all the images are loading, but only one by one... :)

thanx in advance!
Wen

  1. Support Staff 1 Posted by Dmitry Semenov on 19 Sep, 2016 04:14 PM

    Dmitry Semenov's Avatar

    Hello,

    You can not use IMG element if you want images to lazy-load, as browser will start loading them even before JS is executed.

    You need to create IMG elements with srcset dynamically as slides change, here is an example http://jsfiddle.net/DmitrySemenov/danpsx91/

    Dmitry

  2. 2 Posted by info on 20 Sep, 2016 09:33 AM

    info's Avatar

    Briljant, just what I needed, it works like a charm. Thanx Dmitry!

  3. 3 Posted by info on 20 Sep, 2016 12:15 PM

    info's Avatar

    I was a little bit to fast. The script is working but I can't get the slider to load the images in imageScaleMode: "fill". Instead of centering them nicely horizontal en vertical they don't.
    See the develop version: http://www.douwehoendervanger.nl/speeltuin/index.html

    I want the images to load like in this version: http://www.douwehoendervanger.nl/
    both centered horizontal and vertical. In this version I used the setting imageScaleMode: "fill"

    Ay idea how to get the same result with the dynamically added slides? In some way they don't get the inline style like

    <code>style="width: 1563px; height: 1040px; margin-left: -207px; margin-top: 0px;"</code>

  4. Support Staff 4 Posted by Dmitry Semenov on 20 Sep, 2016 03:07 PM

    Dmitry Semenov's Avatar

    As you're modifying content of a slide dynamically and not with rsImg element, there is no option to apply built-in scaling. There are a few solutions:

    var hRatio = sliderWidth / imageWidth;
    var vRatio = sliderHeight / imageHeight;
    var fillRatio = hRatio > vRatio ? hRatio : vRatio;
    
    
    $('img').css({
      width: imageWidth * fillRatio,
      height: imageHeight * fillRatio,
      marginTop: ( sliderHeight - imageHeight * fillRatio) / 2,
      marginLeft: ( sliderWidth - imageWidth * fillRatio) / 2
    });
    

    (example - http://codepen.io/dimsemenov/pen/LRbNJZ )

    but you'll need to predefine image dimensions in markup (from backend, e.g. via attribute), as preloading image with srcset is unreliable - you'll often get incorrect image naturalWidth/naturalHeight.

  5. 5 Posted by info on 23 Sep, 2016 07:59 AM

    info's Avatar

    Thanx for the tip, I’ve got it working with the JS algorithm!

    WEN Kunst, fotografie en webdesign
    Laauwikstraat 130
    6663CM Lent
    06-28346062

    Webdesign: www.wenkunst.nl (http://www.wenkunst.nl/)
    [email blocked] (mailto:[email blocked])

    Fotografie: www.wenversteeg.nl (http://www.wenversteeg.nl)
    [email blocked] (mailto:[email blocked])

    Triodos Bank: NL50 TRIO 0390 5003 80
    BTW: NL158622030B01
    KvK: 09177247

    Op dinsdag 20 september 2016, om 17:07 heeft Dmitry Semenov het volgende geschreven:

  6. 6 Posted by plantsbook on 27 Aug, 2017 09:08 AM

    plantsbook's Avatar

    Hello, Dmitry.
    Your example (http://jsfiddle.net/DmitrySemenov/danpsx91/) works
    but only for one slideshow on the page.
    If there are two slideshows on one page
    only first works and second loads just first images.
    Is there a solution for multiple slideshows?

  7. Support Staff 7 Posted by Dmitry Semenov on 27 Aug, 2017 12:48 PM

    Dmitry Semenov's Avatar

    @plantsbook, create an each loop, e.g. like so http://jsfiddle.net/3Lsg71hL/

  8. 8 Posted by plantsbook on 27 Aug, 2017 02:06 PM

    plantsbook's Avatar

    Thank you.
    Works perfect.

  9. 9 Posted by plantsbook on 24 Oct, 2017 01:05 PM

    plantsbook's Avatar

    Again, if there are two slideshows on one page, second slideshow don't have height (only height of bottom margin from css). You can see it only for the first time page loads, or if you clear cache and open page again. Maybe you know the solution for that problem? example https://indextheme.com/

  10. Support Staff 10 Posted by Dmitry Semenov on 24 Oct, 2017 04:13 PM

    Dmitry Semenov's Avatar

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