Lazysizes: window.lazySizesConfig.loadMode is being overwritten

[eni9889]

The value that I set for load mode is being overwritten to 3 instead of 1
This is my current config:

 <script>
        window.lazySizesConfig = window.lazySizesConfig || {};
        window.lazySizesConfig.loadMode = 1;
        window.lazySizesConfig.loadHidden = false;
    </script>
    <script src="https://cdn.prooffactor.com/assets/javascript/lazysizes.min.js" async=""></script>

To Reproduce
https://codepen.io/eni9889/pen/eYOZZdj

Steps to reproduce the behavior:
Provide all necessary steps to reproduce the bug.

What is the expected behavior
Go to https://codepen.io/eni9889/pen/eYOZZdj and then check value of window.lazySizesConfig.loadMode it is supposed to be 1

What happened instead

The value is 3

In what environment (browser/device etc.) does this bug happen/not happen:
Chrome on OSX

[aFarkas]

Please read the documentation:

lazySizesConfig.loadMode (default: 2): The loadMode can be used to constrain the allowed loading mode. Possible values are 0 = don't load anything, 1 = only load visible elements, 2 = load also very near view elements (expand option) and 3 = load also not so near view elements (expand * expFactor option). This value is automatically set to 3 after onload. Change this value to 1 if you (also) optimize for the onload event or change it to 3 if your onload event is already heavily delayed.

What do you want to accomplish?

[syclone]

How do you prevent the loadMode form changing value to 3 after onload?

[aFarkas]

How do you prevent the loadMode form changing value to 3 after onload?

It changes by design. I already asked: "What do you want to accomplish?"

[syclone]

I know it changes by design. I am asking how can we stop loadMode from changing back to 3?

The reason I am asking is that Google PageSpeed seems to be including activities that occur up to CPU idle time. In other words, images downloaded during onload event are still being seen by PageSpeed.

I am just running some tests. Nothing conclusive. But knowing how to prevent or modify this behavior would help me to analyze Google PageSpeed better with lazyloading.

I just had an idea! It would be ideal to set loadMode = 3 on the first user scroll. Is this possible?

[aFarkas]

I just had an idea! It would be ideal to set loadMode = 3 on the first user scroll. Is this possible?

This is already done. All I can read here is that you think google page speed is doing something wrong and therefore lazysizes has to change. Sorry not.

[syclone]

All I can read here is that you think google page speed is doing something wrong and therefore lazysizes has to change.

I think you are misunderstanding my intension. I did not say Google PageSpeed is doing anything wrong. Nor did I ask you to change lazysizes. I was simply asking if it could be configured that way.

This is already done.

You said this is already done but I don't see how to do this? How can I configure Lazysizes to update loadMore to 3 only after user first scroll event?

[aFarkas]

How can I configure Lazysizes to update loadMore to 3 only after user first scroll event?

You can't. lazysizes changes loadMore to 3 after either the onload or the scroll event is fired.

If you want you can handle the onload event yourself and set lazysizes loadmore to another value. But again all I can read here is that you want to satisfy a tool not a user and you are willing to destroy the user experience to satisfy this tool.

[syclone]

If you want you can handle the onload event yourself and set lazysizes loadmore to another value.

Thanks for that insight and your help... I will look into that.

But again all I can read here is that you want to satisfy a tool not a user

Wrong assumption. I am using the tool as a guide to doing testing as mentioned earlier nothing conclusive. I like to test and get results before making assumptions.

I am not sure why you think this would be bad for the user. There is merit to delay loading additional images until after the user shows the intent of scrolling. This would be particularly useful for mobile users and could actually improve their experience with faster load time and less data usage, processing, storage and etc. But, ill find out if this is true after testing.

Also thank you for this wonderful tool it is a pleasure to use.

[benstechlab]

@aFarkas Loving lazysizes! But, I find your posts on this thread to be unnecessarily rude. You might have a deep understanding for all the history and rational behind your design of auto-changing to loadMode 3 after the page load event - but many other people are new to the library and don't have the history that you have and ask simple questions here.

Specifically the logic in the onload handler appears to a new comer to be arbitrary (you might know why you wrote it this way, but we don't). Why is there a 999ms delay added to pages that have a page load faster than 1 second? I optimized my site to load very fast, and lazysizes made the measured page load significantly longer by adding on average 1.2 second to the measured page load.

var onload = function() {
    if (isCompleted) {
        return;
    }
    if (Date.now() - started < 999) {   //  WHY THIS?? Why 999ms? Why not 2s?
        setTimeout(onload, 999);
        return;
    }


    isCompleted = true;

    lazySizesCfg.loadMode = 3;

    throttledCheckElements();

    addEventListener('scroll', altLoadmodeScrollListner, true);
};

@eni9889 and @syclone here is a super simple lazysizes config "hack" that will force loadMode to always be 1. Whether or not this is a good idea is up to you to decide! I just show you how to do it.

window.lazySizesConfig = Object.defineProperty({},"loadMode",{
    get: function() { return 1; },
    set: function(value) { /* Ignore any set value */ }
});

If you need more default JS configs, you can add them in the curly braces above {}.

[syclone]

Thank @benstechlab!

That looks like a pretty clean solution. I will try it myself and see if that's the secret sauce I've wanted for so long.