Lazy loading of images (jquery) without scrolling

8 Feb

Lazy loading of images is an awesome idea. But while the current jQuery lazy loading plugin requires one to scroll, this one doesn’t! And in only 4 lines of jQuery code!

Lazy loading of images is great. And there’s even a jQuery plugin for lazy loading.

The one problem is: I don’t want my images to load only during a scroll – I want lazy loading, but want the images loaded right after the Javascript kicks in.

So I did some experimenting, and was able to replace:

$("img.lazyload").lazyload();

with this:

$("img.lazyload").each(function() {
    $(this).attr("src", $(this).attr("original"));
    $(this).removeAttr("original");
});

And that’s it! Lazy loading of images on your website, but without requiring the scroll. (You can delete the removeAttr() line if you want, I just like my rendered HTML to be clean.)

And best of all, you don’t need a jQuery plugin to achieve this – it can be done with just the basic jQuery library.

Note that the above requires the patched version of lazy-loading, which only works when your original HTML code for images looks like this:

<img src="maybe_1x1_image_placeholder.png" original="original_image.jpg" alt="" />

Yes, it breaks HTML semantics, but is probably the only way to achieve lazy loading on modern browsers. More info below.

More on Lazy Loading

Lazy loading of images is an awesome idea. The idea behind lazy loading of images is to load images for a website after the page is fully loading, thus enabling the browser to fully load the page even without all images completely loaded. And lazy loading loads the images when required.

Problem is, it doesn’t work on modern browsers. This is a pity, since I think that plugin is really cool, and is well written.

There are some patches that work, but this requires one to swap the original “src” attribute of the image with another fake one (called “original”) and then let the Javascript work its magic during load time.

While this breaks webpage semantics, its apparently the only way to get things to work on current browsers, particularly Webkit-based ones (Safari, Chrome). (And it may break SEO functionality, since you are replacing img src and pointing to a fake image, and the replacement/load is done in Javascript.)

But that didn’t stop me, since it works well and loads my site faster. :)

Advertisements

18 Responses to “Lazy loading of images (jquery) without scrolling”

  1. Mike L April 5, 2011 at 10:41 am #

    Thanks for the article. Any word on how this affects Google Image indexing for SEO?

    • sumanrs April 5, 2011 at 3:09 pm #

      Hi, good question. To be honest. I think that the following things may happen with the setup I’ve outlined here:

      1. All the images are seen by Google and other search engines as pointing to the “placeholder” image.
      2. If you use ALT and TITLE tags for the images, ditto, all those keywords are associated with the placeholder image.

      I would be more concerned with the ALT and TITLE tags, since they are what seem to mostly affect the SEO of the image. For me, SEO doesn’t really matter for the page that I set this up on – the more important thing was to make it load fast. So this solution would probably affect SEO somewhat, particularly if you have a lot of static images that it would be good to build SEO for.

      But I think it would only affect the images, not the content of the page itself. Hope this helps.

  2. Ruutuperse October 7, 2011 at 5:47 am #

    I used your code, but put the real url into title tag. This way it’s not incorrect w3c.
    (of course problem with people w/o javascript, but that is just < 0.5 %)

    • sumanrs October 7, 2011 at 12:17 pm #

      That’s a great idea – only problem is that people who mouse-over the image will see the title tag when they mouse-over … and hence the URL. But: if you remove the title attribute after loading the image, I agree that this would be W3C compatible and would also work nicely.

      • JeremyK October 27, 2011 at 7:13 pm #

        I was dealing with this issue myself. A thought to solve both problems would be the following:

        $(“img.lazyload”).each(function() {
        $(this).attr(“src”, $(this).attr(“title”));
        $(this).attr(“title”, $(this).attr(“alt”));
        });

        You specify the alt text anyways, so I grab the “real” url from title, and then replace title with the alt text. Alt/title end up with the proper values, while being w3c compliant. Is my thinking sound?

      • sumanrs October 28, 2011 at 10:50 am #

        Looks great! I didn’t think of doing it this way, but certainly sounds like it would work.

  3. Toha December 16, 2011 at 11:35 pm #

    Where to put that code? In the wp-config?

    • sumanrs December 17, 2011 at 1:38 pm #

      For WordPress, I think these would go into the WordPress theme files.

  4. Eric Magnuson (@ericmagnuson) March 24, 2012 at 7:31 pm #

    I like your example of lazy loading. It’s such a simple method I’m not sure I would have thought of it.

    About using a tag attribute called “original”, you should use HTML5’s data attribute feature. All you have to do is add “data-” to the front of any custom attributes, and it makes it “legal” by W3C standards. Thus, you’d do ‘data-original=”xxxxx”‘. This is also semantically better than using the title attribute.

    As for SEO stuff, if the photo’s URL is not in the src attribute, you’re always going to have problems. However, it might be possible to fix this using “schemas.” It’s basically extra markup you put in a page to help search engines (and other resources) to better understand the semantics of elements on your page. Instead of me trying to explain it, just check this out: http://schema.org. I’ll have to try it out to see if this would be a remedy to using a placeholder in the src attribute.

    • sumanrs March 27, 2012 at 4:50 pm #

      Awesome ideas! Please let me know if you have a working solution with the SEO, I think that would really help.

  5. deepakkrishna April 23, 2012 at 9:06 am #

    crazy!…………

    Apparently You did not understand the concept of lazy loading. I will tell you what it is.

    lazy loading is for using resources conservatively. When the page is very long, it does not make sense to load the whole page at one go. That is where scrolling comes in. It is not the inability of the coder. When a user scrolls down, then only the images get loaded. Go to his demo page and use firebug to see what’s actually happening.

    Lazy loading is to save bandwidth. What you wrote is completely useless and makes a negative effect from a seo point of view.

    • sumanrs April 23, 2012 at 4:15 pm #

      Thanks for the feedback. But what I do prevents the images from being loaded till the page is completely loaded and the Javascript kicks in. This is great for pages that have a lot of images that need to be loaded after page load, but not necessarily when someone scrolls down to the image.

      In other words, I believe the solution I have outlined does delay the image load, thus speeding up page load, but loads all images right after page load, not necessarily when someone scrolls down to the image.

      • deepakkrishna April 26, 2012 at 9:15 am #

        What you are doing is completely unnecessary. Downloading images does not block others resources, like javascript files. They are done parallely. What you can best do is download them if and when they are necessary, which the plugin exactly does.

      • pedramphp December 5, 2012 at 7:17 pm #

        Hi Sumanrs and deepakkrishna,

        let me give you a simple example, imagine you are using mustache template for generating new templates for you overlay, and you have 50 – 100 images in that template, if you don’t use lazy loading, when you inject the html to the DOM, it will take some time for the browser to load it and that is mostly because of the images, all image resources should get loaded first. in order to fix this issue you need to have lazy loading and YES scroll is not neccessary for lazy loading, you inject the HTML with small loading gif indicators, so your overlay loads faster and then you can load the images.

        by the way this is not rocket seince, deepakkrishna so I say you are totally wrong.

  6. Stacie November 23, 2012 at 4:34 pm #

    This didn’t work for me. All images loaded on page load. You’re saying the basic jQuery library can do this? I’m using version 1.8.0

    • pedramphp December 5, 2012 at 7:18 pm #

      Stacie, use this piece of code after $(window).load , images only get loaded after the window gets loaded.

  7. Shin Senter January 4, 2013 at 3:57 am #

    What is the purpose of lazyload?
    – Create a placeholder for images
    – Avoid not found images and replace them with alternative images

    Lazyload plugin uses ‘load’ event to detect a image does exist or doesn’t. So your solution is good, but not better than lazyload. Because your script just replaces images instantly with the original images instead of fetching the original images in background.

  8. Paul April 6, 2015 at 8:34 pm #

    $(window).resize(); works if you have images that show scrolling (like on tabbing)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: