CODEWITHSUNDEEP
javascripthtmlcss
devondre
devondre

Reputation: 503

How to prevent partially loaded images from displaying?

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.

Upvotes: 1

Views: 3893

Answers (3)

Edward B.
Edward B.

Reputation: 439

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.

Upvotes: 1

csaetre
csaetre

Reputation: 129

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.

    Upvotes: 2

    T.J. Crowder
    T.J. Crowder

    Reputation: 1074809

    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 comments):

    (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.

    Upvotes: 4

    Related Questions