javascript - How to prevent partially loaded images from displaying? - Stack Overflow

admin管理员组

文章数量:1405896

If you have, let's say, 3MB image in img tag, it will take a few seconds to load. When the image is loading, browser is sort of "printing" it - it shows the top part first, then middle and then bottom. How do I prevent this from happening? I'd rather have the image hidden and after second or two shown - when it is fully loaded.

If you have, let's say, 3MB image in img tag, it will take a few seconds to load. When the image is loading, browser is sort of "printing" it - it shows the top part first, then middle and then bottom. How do I prevent this from happening? I'd rather have the image hidden and after second or two shown - when it is fully loaded.

• javascript
• html
• css

Share Improve this question Follow asked Apr 15, 2017 at 16:02 devondredevondre 50377 silver badges1515 bronze badges 2

• 4 Possible duplicate of how to show image only when it is pletely loaded? – chrki Commented Apr 15, 2017 at 16:05
• Do you mean images defined in the markup? If so, the above wouldn't really apply. But if you mean one you're adding dynamically, it would. – T.J. Crowder Commented Apr 15, 2017 at 16:12

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

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

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, and...(see ments):

(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 plete
    checkImages();

    function imageDone(img) {
        img.classList.loading("remove");
        images = images.filter(function(entry) { entry != img });
    }
    function checkImages() {
        images.forEach(function(image) {
            if (image.plete) {
                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 plete, we remove the class so it's visible.

Old school:

To avoid the partial display of an image as it renders, save your large images as progressive, rather than baseline jpgs.

a progressive jpg renders as a series of scans of increasing quality

a baseline jpg renders top to bottom (what you described as “printing”).

The progressive option is considered more user friendly than both the sudden appearance of the image or the slow top to bottom rendering you dislike. The progressive file variant can even be smaller than its baseline counterpart.

For more about this read: The Return of the Progressive JPEG.

I think everyone here gave you some good answers and I just want to add in. 3MB is fairly big for a web image. Don't use something that large for an image being used for logo or layout. That's a larger amount of pixel data that you should only stick with if you are loading something that is a nice, large scale real-life image you want to preserve the quality to (or providing a download to a high-quality graphic of something). Besides the above, if you do a Google search, you find tons of solutions for loading images. Something nice I would use for larger images is a jQuery/ajax solution.

本文标签： javascriptHow to prevent partially loaded images from displayingStack Overflow