Delay image loading with jQuery

Question

I have a page with several galleries including accordions and sliders. The problem is that the page takes forever to load. Is there a way of wrapping an image in a bit of code or applying a class to it to force it to load only after everything else is loaded?

score 59 · Accepted Answer · edited Feb 04 '19 at 21:02

59

Sure you can. Replace your img src attributes with a "#", and add a custom attribute, something like this:

<img src="#" data-delayedsrc="/img/myimage.png" />

Then, add a javascript line when your page loads that does something like this:

$('img').each(function(){
  $(this).attr('src', $(this).data('delayedsrc'));
});

edited Feb 04 '19 at 21:02

João Pimentel Ferreira

14,289
10
80
109

answered May 24 '10 at 14:20

Jerod Venema

44,124
5
66
109

1

Cunning, that may just be what I need. – DCD May 24 '10 at 14:23
2

You may need to make that a blank.gif instead of # to keep IE happy, but it should work. – Jerod Venema May 24 '10 at 14:27
24

You could use an HTML data attribute instead. – Drew Noakes Jun 22 '11 at 15:43
Is this the fastest way to do this? I'm doing it on 400 thumbnails and the browser struggles a little. – Drew Baker Aug 16 '11 at 03:24
@DrewBaker, you could use sprites with a single image if you want, but other than that, this is the best you'll get as far as loading. You could also just check that you're not doing any dynamic image sizing in the browser, etc. – Jerod Venema May 02 '12 at 16:49
9

Would it be a slight improvement to only select imag tags with the delayedsrc attribute, so not looping through all image elements unnecessarily? ie. $('img[delayedsrc]').each(function(){ – dan Oct 05 '12 at 00:07
@dan, Actually no. With this code it will force javascript to check every img tag anyway. If possible, use id's to narrow the search, since it is the fastest way of selecting tags as much as I know. – SteveB Dec 10 '13 at 10:32
And for non JS users? – Jack Jan 15 '15 at 00:51
No real options without JS :/ – Jerod Venema Jan 16 '15 at 01:17
I am using webpack, if I don't provide the src and set after loading image is not getting loaded – Sunil Garg May 04 '18 at 11:12

score 8 · Answer 2 · edited Jun 11 '15 at 22:36

8

If you're using jQuery (and I assume you are as this is tagged as such) take a look at the Lazy Load Plugin for jQuery. It delays the loading of images that are outside the viewport until the user scrolls to them.

Update 2015: This plugin was broken at one point, but now works again. The last comment says as much, but I almost missed it because it was hidden in the collapsed comments.

edited Jun 11 '15 at 22:36

Martin Hansen Lennox

2,837
2
23
64

answered May 24 '10 at 14:22

David Lantner

561
2
10

Will it display images that are technically inside the viewport only obscured? – DCD May 24 '10 at 14:23
Test it and find out :-) Its a very easy to use plugin. – Erik May 24 '10 at 14:28
5

That plugin isn't supported anymore unfortunately - (from the site) "Lazy Load is currently not usable. It does not work with the latest browsers as expected. I have currently no time updating the code myself. Patches are always welcome. If you find a solution just fork and send a pull request. Thanks!" – Mark Steudel Jan 12 '11 at 18:18
@DCD, @Erik, @Mark, @David -- Does anyone know any alternative for lazy load that actually works? – Drew Noakes Jun 22 '11 at 15:46
There's now an updated version of this library that does work with current browsers. – Chris Bloom Apr 30 '13 at 14:21

score 6 · Answer 3 · answered Jul 18 '13 at 23:12

An easy way to delay loading images (and iFrames) is with a combination of pure JS, jQuery.data() and the custom HTML5 data-* attribute. The src of the image initially can point to a loading GIF. The data-* attribute contains the URL path of the image you ultimately want to load. The pure JS sets up a delay (3000 milliseconds in the example below), and then executes the jQuery.data(), which sets the image's src to the intended image.

The example below performs on each image with class="load-delay".

Live Example: http://seandebutts.com/2013/07/03/html5-delay-loading-images-iframes/

CODE

JS and jQuery:

$(document).ready(function () {
  setTimeout(function () {
    $('.load-delay').each(function () {
      var imagex = $(this);
      var imgOriginal = imagex.data('original');
      $(imagex).attr('src', imgOriginal);
    });
  }, 3000);
});

HTML and jQuery Library:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <meta charset="utf-8" />

</head>
<body>
  <h1>Loading-Delayed Image</h1>
  <img class="load-delay" src="http://i.imgur.com/7ZMlu3C.gif" data-original="http://oi42.tinypic.com/9sqmaf.jpg" />
</body>
</html>

That does the trick beautifully sans any "lazy load" plugin or similar, great for single-page sites that have no scrolling involved, where all interaction takes place above the fold, so to speak. Much appreciated! — Systembolaget, Nov 22 '15 at 22:32

score 1 · Answer 4 · edited Jun 22 '11 at 15:47

1

Keep only one image into the HTML so that viewer has something to start with, then inject the rest using jQuery with

$(document).ready(function() {
    //load rest of the images
});

You can also use event loaders and AJAX or "load as you go", just build a simple call back function if it's auto-rotating gallery or load on click.

edited Jun 22 '11 at 15:47

Drew Noakes

300,895
165
679
742

answered May 24 '10 at 14:21

Tumharyyaaden

2,733
3
19
20

Delay image loading with jQuery

4 Answers4

Linked