Prevent show not fully loaded images-CodePudding

I have a page for showing users' data, like their images (Personal, Learning, etc).

For showing images, I have a Modal. it has an img tag.

Manager of the website, clicks on links, and website opens a Modal for him.

But there is only 1 Modal and one img tag!

Manager clicks on Personal Picture of one user. Browser loads the picture and shows it into the Modal.

Manager closes the modal and opens Bachelor's degree photo of the same user. Browser first opens the same Modal (containing previous picture) and then loads the new picture!!!

Manager sees the previous picture for a few moments and I think it will make a bad experience for all users, Especially the users, whom have a slow network.

Modal, opens by JS. So how can I make sure that picture has loaded to open the Modal after that?

I really need it. Is there any idea?

(I use jQuery too.)

CodePudding user response：

One way would be to give them a class that gives them opacity: 0 so they don't show:

<img src="/path/to/image" >

And in CSS:

.loading {
opacity: 0;
}

In head, we override that if JavaScript is disabled (so we're not unfriendly to non-JavaScript visitors :

<noscript>
<style>
.loading {
    opacity: 1;
}
</style>
</noscript>

...and then in code at the bottom of your page, find all your images and remove the class when they've loaded

    (function() {
    // Get an array of the images
    var images = Array.prototype.slice.call(document.querySelectorAll("img.loading"));
    // Hook their load and error events, even though they may have already fired
    images.forEach(function(image) {
        image.addEventListener("load", imageDone.bind(null, image));
        image.addEventListener("error", imageDone.bind(null, image)); // Could handle errors differently
    });
    // Check to see if any images are already complete
    checkImages();

    function imageDone(img) {
        img.classList.loading("remove");
        images = images.filter(function(entry) { entry != img });
    }
    function checkImages() {
        images.forEach(function(image) {
            if (image.complete) {
                imageDone(image);
            }
        });
        if (images.length) {
            // Check back in a second
            setTimeout(checkImages, 1000);
        }
    }
})();

That's a belt-and-braces approach. It proactively checks to see if images have finished loading, and also reactively handles the load and error event of images. In theory, we shouldn't need the setTimeout, and you might do testing without it, but...

Notice how once an image is complete, we remove the class so it's visible.