Doesn't work (?)

[mindplay-dk]

Tested in Chrome, and it doesn't seem to work - I look in the network tab, and all the images are downloaded immediately.

Even though your script does pick up the image tags and remove the src attributes, it is doing so when the load even fires - at which point the browser has already started downloading the images.

I could be wrong, but as far as my understanding, this approach had already been tried, and was already known not to work?

[web3rover]

When src attribute is removed browser stops downloading the images. So if images are of large size then u will see the difference. If your images are of something like 10-100KB then u won't see the difference. In that case lazy loading is not even required.

[mindplay-dk]

I emulated a low bandwidth connection while testing your demo page - it continues for about a minute, fully loading all the images.

Even though it does initially replace the images with spinning placeholders, until the images are fully loaded, it does not appear to delay loading as such - images continue to fully load in the background.

How are you testing this, and on what browsers?

[web3rover]

I have tested it in all latest browser releases. Just now I inspected the page in chrome and I see the download get cancelled. Its starts downloading the image when it enters the viewport.

[web3rover]

Many have already integrated it into their websites and its working for them. If you want I could make a video and show it to you.

[mindplay-dk]

I'm puzzled as to why it doesn't seem to work on Chrome for me.

Can you point me to a real site where this was implemented?

can you show us a website of yours how you implemented this?

[web3rover]

please check the demo

[mindplay-dk]

But you said yourself,

If your images are of something like 10-100KB then u won't see the difference

The images in your demo are ~ 25KB each, so the demo page can't actually demo the script.

Also, if I have a page of photos each 640x480 px, those are probably around 100KB each - you say I won't need the script then, but that depends on how many images I have, more so than their individual size.

So this approach only works for a very specific use case - it can't be considered general purpose, since in e.g. most photo galleries or product listing with lots of images, it won't actually be any use. I'm betting this is why most everyone else has abandoned this idea... I wish it were possible to make this work well, but as browsers are right now, I don't think it is.

[web3rover]

You also need to consider the bandwidth speed. Lazy loading(or this library) is useful in two cases:

1. Slow Internet connection. In this case ~25KB images will be lazily loaded.
2. Too many images. Even if you have a speed Internet the page loads slower due to number of requests therefore this script is useful as it blocks the requests until they are required.

[tonygustafsson]

There is a reason people skip the src and uses data attributes instead :)

[mindplay-dk]

There is a reason people skip the src and uses data attributes instead :)

Yes, but that approach is wrong - an <img> tag without a src attribute is not a valid <img> tag, so that approach completely defeats the purpose of using <img> tags in the first place. You might as well use <div> or some other tag then, at least then you would be producing valid markup - broken <img> tags have no value in SEO terms anyhow, they can only be understood by the script on the page, to the rest of the world it's just broken markup...

[rjgotten]

Yes, but that approach is wrong - an <img> tag without a src attribute is not a valid <img> tag, so that approach completely defeats the purpose of using <img> tags in the first place. You might as well use <div> or some other tag then, at least then you would be producing valid markup - broken <img> tags have no value in SEO terms anyhow, they can only be understood by the script on the page, to the rest of the world it's just broken markup.

Has there ever been any thorough testing of what Google and other search engines make of simple anchors or meta tags augmented with http://schema.org/ImageObject markup?

E.g.

<figure itemscope itemtype="http://schema.org/ImageObject">
  <meta itemprop="url" content="./images/lazily-loadable-image.jpg" />
</figure>

Seems the most reasonable alternative, really...

[tonygustafsson]

mindplay-dk, Usually we set src to a preload image that is replaced by the JavaScript. I just meant that the browser will load images automatically - the imgs are detected before the JavaScript is loaded, so images will load before that.

rjgotten, That would be awesome. I'm curious about this too.

[mindplay-dk]

Has there ever been any thorough testing of what Google and other search engines make of simple anchors or meta tags augmented with http://schema.org/ImageObject markup?

That is an interesting thought in deed! :-)

[tusharmath]

@mindplay-dk Qazy's implementation can not work. You are right that image will be loaded before this plugin even gets initialized. I would recommend you to use a #! or hashbang instead as per the following blog - http://www.idea-r.it/blog/110/en/lazy-loading-seo-problem