[Chrome] Images fully loaded instead of lazy loaded

[ridom]

Hello !

Every browser works perfectly fine excepts Chrome who loads all the images, disabling the goal of the plugin. I am creating the DOM with an Ajax request who read the content of an image folder and then firing the lazyload plugin in order to load only on user scroll (of course !). The images have a given width attribute and a height set on auto. It seems that the issue come from that 'free' size but impossible to fix it keeping the good image ratio. Do you know where i am wrong? Have you ever seen that issue?

Thanks !

[stephenricks]

Experiencing the same error too. All images classified as lazy are not lazyloading.

[ridom]

Hello stephenricks,

Are you using height="auto" ? In my case I was pre-building the page presizing each div containing the future loaded pic in order to allow the user seeing how much scroll he will have to do (in the case there is a lot of picture). To do that, I had to get the size of each potential loaded pic with php and push the height in the DOM. My issue came from the fact I used height="auto" to pre-build the container with the good ratio while Chrome doesn't recognize it correctly, resulting in the fact that each container was pre-sized with a height of 0 px (because no picture inside), so each one of them was considered being in the viewport as of the page was loaded and then... loaded by lazy-load. I have used "innerHeight" to calculate the ratio by setting the height to the desired one and pushing it dynamically in the DOM instead of auto.

Hope this is understandable and helpfull, ridom

[ridom]

@stephenricks ? Did you find the error?

[tuupola]

Your images are most likely all in the viewport when the page loads. This happens for example when html does not set the dimensions of the image.

[ridom]

Would you suggest, instead of presizing every images, to move all the lazy loaded images under the floating line (or waterline, sorry I don't know name for the part of the page which is under the bottom line of the viewport) ?

[tuupola]

Giving the images a size using css or image tag is usually the best option.

[ridom]

I totally agree but, let's say that we have to load +1000 of images from a folder (finally the extrem goal of lazy loading images), some are in landscape, some are in portrait. How would you do that ? Knowing that, if you set a common CSS width or height for both landscape and portrait, portrait images will be displayed bigger. Would you retrieve image size with PHP ?

[tuupola]

If you already use PHP then it would be a good choice. Main point is you need to make sure all your images are not in the viewport when document is loaded.

[ridom]

Ok and if I don't want to use PHP, there is no other way to retrieve the size instead of using a server side JS solution like node.js (or to read a file with the size for each one)?

[tuupola]

If you want to programmatically retrieve the size of an image file there is no other way than using some programming language to do it. It does not have to be serverside though.

It should technically possible fetch the first few bytes of an image and parse the dimensions from there. There is some ancient PHP code for getting remote image dimensions. I am pretty sure someone has done something similar with JavaScript.

Doing all this in serverside makes more sense though. After all you want to reduce the traffic and not make an HTTP connection for each image just to get dimensions.

[ridom]

Yes in the solution I have used (described above) I retrieve the height with PHP:

<?php
$fileheightArray = array();
$dir_handle = opendir(dirname(realpath(__FILE__)).'/img/');
    while($file = readdir($dir_handle)){
        if($file !== '.' && $file !== '..'){
            if ($file != '.' && $file != '..') {
                $info = getimagesize(dirname(realpath(__FILE__)).'/img/'.$file);
                $height = $info[1];
                array_push($fileheightArray, "$height");
            }
        }
    }
echo json_encode($fileheightArray);
?>

Then I add to the DOM each image with the height attribute (with a JS processed ratio following the landscape or portrait mode of the picture). I haven't found other solution.

Thank you for your explanations @tuupola

[tuupola]

While you are already at it, you could also generate lowres thumbnail of each image and use it as a placeholder. This will create the "blur up" effect. You can see it for example in this example blogpost. Scroll down to see the effect.

<img class="lazyload" src="img/example-thumb.jpg" data-original="img/example.jpg" width="765" height="574">

[ridom]

I already use a single placeholder ( 1x1 ) but i like the idea, very nice effect. Not sure but I think I have seen something like this on Medium. Just a question, do you have first to generate the low res blurred thumb for each picture of 16x9 and then upload it in /img/placeholder/ or is it done by a script ?