Trigger Event after All Images Loaded

visibility 165 access_time 7 months ago languageEnglish

When implementing Bootstrap 5 Masonry Cards Layout, I added a event handler after each image is loaded to layout the cards using Masonry JavaScript library. The drawback of that approach is that the function will be called as many times as the images count. In a modern environment, we could just use Promise to call the function once after all images are loaded.

Example code

<script>

        var $grid = document.querySelector('.row');
        var msnry = new Masonry($grid, {
            itemSelector: '.col',
            percentPosition: true
        });
        var $images = $grid.querySelectorAll('.card img');
        // $images.forEach(function (el) {
        // el.addEventListener('load', function () {
        // console.log("Image is loaded: " + el.getAttribute("src"));
        // msnry.layout();
        // });
        // });
        Promise.all(
            Array.from($images).filter(img => !img.complete)
                .map(img => new Promise(resolve => { 
                    img.addEventListener('load', resolve); 
                    img.addEventListener('error', resolve);
                })
                )
        ).then(
            () => {
                console.log('images finished loading');
                msnry.layout();
            }
        );
    </script>

The output looks like the following screenshot:


warning Promise is not supported by all browsers but is supported by majority of modern browsers. 

Credits to https://stackoverflow.com/questions/11071314/javascript-execute-after-all-images-have-loaded.

References

Promise 

info Last modified by Raymond 7 months ago copyright This page is subject to Site terms.

Please log in or register to comment.

account_circle Log in person_add Register

Log in with external accounts

timeline Stats
Page index 0.68
More from Kontext
Download Google Fonts via Gulp
visibility 429
thumb_up 0
access_time 2 years ago
JavaScript Convert SVG to Base64
visibility 162
thumb_up 0
access_time 5 months ago