Skip to content

Instantly share code, notes, and snippets.

@robertcdawson

robertcdawson/lazyload_nojs.html

Created April 15, 2015 23:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save robertcdawson/7a3d96ae7b786dada2b0 to your computer and use it in GitHub Desktop.
Save robertcdawson/7a3d96ae7b786dada2b0 to your computer and use it in GitHub Desktop.
Download ZIP
Lazy-load images without JavaScript
Raw
lazyload_nojs.html
<!DOCTYPE html>
<html>
<head>
<title>Lazy Loading without JavaScript</title>
<style type="text/css">
/* Hide images on page load. */
#img1, #img2, #img3 {
display: none;
}
/* Show images when targeted. */
#img1:target, #img2:target, #img3:target {
display: block;
width: 100px;
height: 100px;
}
#img1:target {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAG1BMVEXMzMwAAACysrJmZmaZmZl/f39MTEwzMzMZGRnJc7zuAAABdElEQVRYhe2Vz0/CMBSAH6XbOFom647VGHeFRDOOLHDwCCiJR4bReBySqEdmPPBn2xaI4ce6vnu/Q9eu71vf29oMwOFwOBwOh8MGcodWvKguIvnAKpS1sUpvc6yQJ7Phx8mxUgMp5wFSeQgBqXhsbFCEzuNgBND6gVOFrmQTdL2SLQD6jA/UzduS8bEnv4cvzij6JTeK/DVlIoke845OZzVL4+HlNqJC+ZTTWbEcAI3lcPIrm4SbFSbz8SMVk48BSl3J0qyEOp25bLM5eKGeycyKukuYevhVAf42tmVW1qqrylDdXUxgVopzSttSaa2huUvswl6hXM9MCnsF8i6ooyUQSoNPgep9YL9KnzEWCYRCIriZ/R9Wq/I7BxFWq3CBVaDH72cjgVLouyw/XmAUuUWvR6k89hhFManaY9U0Q+vQPYSjFcArpPY3coLfqY/ZQ7eXXmGvBNFUpvV8uG1qVsnZ5ruMu/aGZPj29TJAGQ6Hw7HnDynUN/m6Uo3WAAAAAElFTkSuQmCC');
}
#img2:target {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAG1BMVEXMzMwAAACysrJmZmaZmZl/f39MTEwzMzMZGRnJc7zuAAABvklEQVRYhe2VS0+DQBRGpxRKl94ijyU+Yrcl0dQlpHUP1SYui0biEmyiLovR6M92hlcLXKDs5yxoGb7DnYGZgRAOh8PhcDicIxCuuwJmtUXSWgXpFeDX7aNcgBEEsV4u1K54PzQtRl+lRuGhTblLjnJ75zEEMDszVXy3O1PBm6HNSW2hdLZXNodn4pYe5JkUwxMht6DbrPEqBt2V3hqqJA95EPovczCn2r2vsjbYrufG4rQIWW5deaeXnTCyiWiwm37Tw1TfK7FZV4D2Z6SxDHs4aSIqFFEndUVJusMG6WyIpCRXnEKRVUSZkPyFnYVklGbHheLsECVpY8Ngf+VJeu9cEWIbUUJMmeT9UkirMt6RYdaxkyxihZ1K9oC8LCkZZqdCfPayxXz6euXVgisDfUVEX20ogle5BQCtqQimCBq5XOeLdVgrgg7/8GVbtSJolYMdZVQvgo7F0m/WyzQahTUDVUS634FBlxyZYnsLptBpdb6cA1sGWpCArcqKwvDoHIshZUeOYqh0ZyoIenemSn9F6L8Tj9TuTI6Y/lRXVhuytqLdeqx8iNqr+PD3GRv41t3EIvh4tnsZHA6HU/APbdlGTuPUBM4AAAAASUVORK5CYII=');
}
#img3:target {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkBAMAAACCzIhnAAAAG1BMVEXMzMwAAACysrJmZmaZmZl/f39MTEwzMzMZGRnJc7zuAAAByUlEQVRYhe2US1PCMBDHQ59ew6PtsYjMeLSOcm4B8UoHqx6pDoNHIuKZjE7lY5ukLdgS+pjxmP8hkzT7S3a3uwFASEhISEhISKiCem6JgWTnv/jzQuARQ/iVg4oRB0avS9yqgSjmlIwqztr03QJEijcv20WecKUatRHJ/C9EYqOdWe33so7dX5FhDZ6hYQMZww9m8gbhBjylPJA7GYQl2dSMGWpKaDGANKu+eTtD346b2nhbDhK65B/o7XhXtYixhFCKqJZ9jECa+JBwQCM+nDXphg4TZITfAQehAfk0SIUMPl0BhSH6DlvXgIfQm7v0cJrPMD4eJwiMXA5i0VmDBUmmKHY9jaUfGpxYTC6SGkrhthDZkYpPHNvbaEYZ4q3oRP1TJbgM0VhLec2DUZKQ0wiAGxtMWB0kcqYliNYiDQ9fQA2kO5fugowrpY55mTOpsF12S66mSMWCEkSG6+BhSBdJp+WeC17GJjT8iDijs45Tco8SDwHg/GKEOvS+KBjPuE/fEUKk0vLuoeS+anJY24yDYVWAJG5V3TZRoz7SnddGwqMiOC2XjXKdhxgtbNLx+aeoUBNo/ezgVw2CVMhg+XlTixASEhI66BdKgF1VSLdsZwAAAABJRU5ErkJggg==');
}
</style>
</head>
<body>
<p><a href="#img1">Load Image 1</a></p>
<p><a href="#img2">Load Image 2</a></p>
<p><a href="#img3">Load Image 3</a></p>
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment