css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

NEW VERSION! Vanilla JavaScript! See: http://codepen.io/Merri/pen/WbEWgP

Didn't see any approaches that would be short in HTML syntax which would also account for JavaScript not being enabled.

It is a shame IE8 and below force to make the syntax longer it would otherwise need to be.

Comments

  1. Is there a way to remove IE support and replace the noscript tags and the conditional tags with a simple div?

  2. @ciprian <img> is enough to drop IE8- support in HTML syntax. JavaScript doesn't really contain anything IE-specific on it's own.

    Replacing noscript with a div would defeat the purpose of this solution, because then you would no longer lazy load the image. Noscript is a must to avoid browser loading the image on it's own.

  3. @Merri I understand. I wanted to use a div, because my web site has a <div><img alt=""></div> feature and dropping this script inside my main JS file would have helped enormously. Is there any way to alter this script to achieve this? I tried but I couldn't make it work.

  4. @ciprian Sorry, this is not the script you're looking for. This script's lazy loading mechanism doesn't make sense unless it is used together with noscript tags, because if you have just img tags existing in the DOM (outside noscript tags) then the browser will load start to load them even before this script loads. Thus you will not gain anything by modifying this script.

    You can find other lazy loading scripts as well, but all of them require you to change the HTML syntax. There is no way around it, it must be done, because if there is <img> then browser will try to load the stuff in src and then that isn't lazy loading anymore.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...