addClass on preload images

[willybrauner]

Hi, Congrate for this amazing plugin ! I am looking for a solution for trigger image loaded when I'am watching pics in viewer with your plugin.

My reflexion is :

• I have a gallery with images, height attribute less.
• I use lazysizes plugin for lazyload these images.
• for define data-zise attribute, I get simply the width and the height of the image when the image is loaded with the class lazyloaded.

$("img").attrchange({
    trackValues: true,
    callback: function(evnt) {
        if(evnt.attributeName == "class") { 
            if(evnt.newValue.search(/lazyloaded/i) == -1) {

                $(oldArticles_a).each(function() {
                    var imgWidth = $('img', this).width();
                    var imgHeight = $('img', this).height();
                    $(this).attr({'data-size': +imgWidth+'x'+imgHeight});
                });

            }
        }
    }
});

The problem is, the image is only loaded (and data-size defined) when I scroll the page but not when I swipe my gallery in photoswipe. From the documentation of lazysizes plugin, I can trigger an image to load by adding class lazypreload on the native image.

So, how can i add lazypreload class when image is preloading in photoswipe mode ?

thanks for your help !

[mjau-mjau]

Really not quite sure what your question is in regards to lazysizes. PhotoSwipe already uses lazy-loading. If you have populated the photoswipe slide object properly before initiating photoswipe, it will lazy-load images on demand, based on user-swipe. By default, it will preload one previous and next image from range of the currently viewed image. Why would you manually "trigger" an image to load in photoswipe? More importantly, why would you trigger an image to load in photoswipe with lazypreload?

Are you saying Photoswipe is not loading images on swipe? Need a link.

[willybrauner]

You're right, photoswipe is loading prev & next images during the swipe mode, I can check it on network of my browser. If we forget lazysizes plugin, how can I add a class on preload image on photoswipe, (next and prev img) ? It don't seems to be a regular ask;

i need this, because, in my script, data-size attribute is define only when image is loaded (for get height and with of the images). If I know when image is preloaded, I can add data-size attribute at this moment with right width and height dimensions.

Thank for your answer.

[mjau-mjau]

But what is the data-size attribute used for and where do you have it? How would it get populated if you were not using photoswipe?

[willybrauner]

Yes I use photoswipe,

if I understand the documentation of photoswipe, I need to define a data-size attribute on the <a>element around the <img>

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
        <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400">
            <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" />
        </a>
        <figcaption itemprop="caption description">Image caption</figcaption>
    </figure>

here, 600 for width of img and 400 height.

Without this attribute, photoswipe don't know dimensions of the image. So I create myself this attribute in my script (the exemple above, in my first post). Your question suppose my reflexion is wrong, Where is my mistake ?

[mjau-mjau]

Ok, but you are basically asking how to set data-size from photoswipe, whereas data-size is in fact a requirement before photoswipe initializes. What would be the point of photoswipe requiring data-size if it could be self-created by photoswipe?

Also, lazypreload would not offer any assistance here even if it could work with photoswipe. You are basically talking about a concept of getting image dimensions after images are loaded in some way, which defeats the purpose, as they need to be known before images load.

Basically you are asking how to operate photoswipe without knowing image sizes from server ... There is a plausible workaround mentioned for this here #796 . If you can add that workaround, you could just set data-size="0x0". Not pretty, but it will work.

[mjau-mjau]

Just for reference, the html you outlined in your last post is from the default photoswipe example. It is not required to use this to create your photoswipe slides object, and that is why I did not immediately recognize your question. In either case, you are correct that photoswipe requires width and height of images predefined.

[willybrauner]

Thanks for the workaround. I gonna check it.

The fact is, when the image is loaded (view in my screen during the scroll, not during swipe with photoswipe), the lazyload plugin turn the class lazyloadto lazyloaded. When this class changed, the data-size attribute is define (with my script). At this moment, I can click the image and open it with photoswipe and it work fine ! The problem is when I swipe images who hasen't lazyloadedclass because I haven't scroll all the content of the page.

My idea was to force lazyloaded class to the next and prev image I swipe, even if I din't scroll all content of the page before. I can force this by adding a class call lazypreload. This is just a trigger, this isn't a realy preloader.

So maybe it's more understandable rightnow.

Thanks @mjau-mjau

[mjau-mjau]

Right. As I understand, you have images in your page, that are the same images that are displaying inside photoswipe. It won't help much to force lazyloaded class to images unless they are loaded as well. Besides, photoswipe requires the width/height before the image is displayed anyway ...

This concept simply will not work. You need image dimensions before the images are viewed inside photoswipe. It will work showing the images that are already lazy-loaded in the page, but it does not know dimensions of the images that are not yet lazy-loaded. Even if you set lazyloaded class from photoswipe, you are basically asking "please photoswipe can I tell you image dimensions after the image is loaded in photoswipe?" ...

The workaround does in fact do just that, but in a photoswipe-eccentric approach, as it will correctly invalidate and update the slide object without any visual glitches.

[ghost]

@willybrauner can this be closed now?

[willybrauner]

yes, thanks @jhabdas.