CODEWITHSUNDEEP
javascriptjqueryhtmlcssimage
j_d
j_d

Reputation: 3082

Defer img loading until after pageload?

I'm wondering if there is any standard to defer all loads, and then programatically call them later? Interested in doing something like Facebook, wherein extremely small blurry jpegs are set as background-image, and then the full res images are called in on pageload.

Example:

HTML

<img class='load-later' src='example.com/image.jpg'>

CSS

img.load-later {
    background-image: url('blurry-preview.jpg');
}

JS

function pageLoad() {
    $('.load-later').load();
}

Upvotes: 0

Views: 354

Answers (2)

Culme
Culme

Reputation: 1085

Set the src property to the "blurry-preview.jpg" image at first, and then change it to the actual image src at a later stage. Stupid-simple example (using JQuery):

<img src="blurry-preview.jpg" alt="something" class="imgo" />

 $(document).ready(function () {
    $('.imgo').attr('src', 'goodlooking-image.jpg');
 });

This makes more sense if you for example use img tags with data-[x] attributes holding the src (or other attributes) you wish to apply later on. Here is an example that modifies "srcset" and "size" instead of src:

<img src="blurry-preview.jpg" alt="something" class="imgo" data-srcset="m.jpg 300w, l.jpg 600w" data-sizes="(max-width: 500px) 100vw, (max-width: 1000px) 33vw, 600px" />

Javascript altering image tag using data from it's data-[x] attributes (modifying srcset/sizes rather than src, as per your request):

$(document).ready(function () {
    $('.imgo').each(function () {
        $this = $(this)
        $this.attr('srcset', $this.data('srcset'));
        $this.attr('sizes', $this.data('sizes'));
    });
});

Upvotes: 1

Cameron Tinker
Cameron Tinker

Reputation: 9789

You could load the images on document ready. With the something like the following:

$(document).ready(function() {
// set images here
});

You would need to update the src attributes of your images inside the document ready function.

Upvotes: 1

Related Questions