29

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?

4 Answers 4

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'));
});
10
  • 1
    Cunning, that may just be what I need.
    – DCD
    May 24, 2010 at 14:23
  • 2
    You may need to make that a blank.gif instead of # to keep IE happy, but it should work. May 24, 2010 at 14:27
  • 24
    You could use an HTML data attribute instead. Jun 22, 2011 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, 2011 at 3:24
  • 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 5, 2012 at 0:07
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.

5
  • Will it display images that are technically inside the viewport only obscured?
    – DCD
    May 24, 2010 at 14:23
  • Test it and find out :-) Its a very easy to use plugin.
    – Erik
    May 24, 2010 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!" Jan 12, 2011 at 18:18
  • @DCD, @Erik, @Mark, @David -- Does anyone know any alternative for lazy load that actually works? Jun 22, 2011 at 15:46
  • There's now an updated version of this library that does work with current browsers. Apr 30, 2013 at 14:21
6

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>
1
  • 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! Nov 22, 2015 at 22:32
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.