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
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'));
});
-
1
-
2You 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
-
Is this the fastest way to do this? I'm doing it on 400 thumbnails and the browser struggles a little. Aug 16, 2011 at 3:24
-
9Would 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(){– danOct 5, 2012 at 0:07
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.
-
Will it display images that are technically inside the viewport only obscured?– DCDMay 24, 2010 at 14:23
-
-
5That 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
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! Nov 22, 2015 at 22:32
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.