Skip to content

Instantly share code, notes, and snippets.

@chulman444

chulman444/Lazy_load_less_fany.html

Last active February 4, 2018 22:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chulman444/bedec4cf6496aaf95ae72cde4c4f8b40 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chulman444/bedec4cf6496aaf95ae72cde4c4f8b40 to your computer and use it in GitHub Desktop.
Download ZIP
Trying out lazy load without src attribute from the first place. Original code: https://codepen.io/marvin52/post/hack-lazy-load
Raw
Lazy_load_less_fany.html
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<script type="text/javascript">
function lazyLoad() {
var w = window;
var lazy = function(){
var imgs = document.querySelectorAll('[lazy]');
for(i = 0; i < imgs.length; i++){
var o = imgs[i], lazy = o.getAttribute('lazy');
if(o.y <= (w.screen.height + w.scrollY + 50) && o.y >= ( w.scrollY - 50)){
o.setAttribute('src', lazy);
o.removeAttribute('lazy');
}
}
}
w.onload = w.onscroll = lazy;
}
lazyLoad()
console.log("Called within a script element.")
</script>
<body>
New method
<!-- LAZY LOAD -->
<img lazy="http://placehold.it/350x150" width="350" height="150" /><br>
<img lazy="http://placehold.it/350x151" width="350" height="151" /><br>
<img lazy="http://placehold.it/350x152" width="350" height="152" /><br>
<img lazy="http://placehold.it/350x153" width="350" height="153" /><br>
<img lazy="http://placehold.it/350x154" width="350" height="154" /><br>
<img lazy="http://placehold.it/350x155" width="350" height="155" /><br>
<img lazy="http://placehold.it/350x156" width="350" height="156" /><br>
<img lazy="http://placehold.it/350x157" width="350" height="157" /><br>
<img lazy="http://placehold.it/350x158" width="350" height="158" /><br>
<img lazy="http://placehold.it/350x159" width="350" height="159" /><br>
<img lazy="http://placehold.it/351x150" width="351" height="150" /><br>
<img lazy="http://placehold.it/352x150" width="352" height="150" /><br>
<img lazy="http://placehold.it/353x150" width="353" height="150" /><br>
<img lazy="http://placehold.it/354x150" width="354" height="150" /><br>
<img lazy="http://placehold.it/355x150" width="355" height="150" /><br>
<img lazy="http://placehold.it/356x150" width="356" height="150" /><br>
<img lazy="http://placehold.it/357x150" width="357" height="150" /><br>
<img lazy="http://placehold.it/358x150" width="358" height="150" /><br>
<img lazy="http://placehold.it/359x150" width="359" height="150" /><br>
<img lazy="http://placehold.it/351x151" width="351" height="151" /><br>
<img lazy="http://placehold.it/351x152" width="351" height="152" /><br>
<img lazy="http://placehold.it/351x153" width="351" height="153" /><br>
<img lazy="http://placehold.it/250x150" width="250" height="150" /><br>
<img lazy="http://placehold.it/250x151" width="250" height="151" /><br>
<img lazy="http://placehold.it/250x152" width="250" height="152" /><br>
<img lazy="http://placehold.it/250x153" width="250" height="153" /><br>
<img lazy="http://placehold.it/250x154" width="250" height="154" /><br>
<img lazy="http://placehold.it/250x155" width="250" height="155" /><br>
<img lazy="http://placehold.it/250x156" width="250" height="156" /><br>
<img lazy="http://placehold.it/250x157" width="250" height="157" /><br>
<img lazy="http://placehold.it/250x158" width="250" height="158" /><br>
<img lazy="http://placehold.it/250x159" width="250" height="159" /><br>
<img lazy="http://placehold.it/251x150" width="251" height="150" /><br>
<img lazy="http://placehold.it/252x150" width="252" height="150" /><br>
<img lazy="http://placehold.it/253x150" width="253" height="150" /><br>
<img lazy="http://placehold.it/254x150" width="254" height="150" /><br>
<img lazy="http://placehold.it/255x150" width="255" height="150" /><br>
<img lazy="http://placehold.it/256x150" width="256" height="150" /><br>
<img lazy="http://placehold.it/257x150" width="257" height="150" /><br>
<img lazy="http://placehold.it/258x150" width="258" height="150" /><br>
<img lazy="http://placehold.it/259x150" width="259" height="150" /><br>
<img lazy="http://placehold.it/251x151" width="251" height="151" /><br>
<img lazy="http://placehold.it/251x152" width="251" height="152" /><br>
<img lazy="http://placehold.it/251x153" width="251" height="153" /><br>
<img lazy="http://placehold.it/350x250" width="350" height="250" /><br>
<img lazy="http://placehold.it/350x251" width="350" height="251" /><br>
<img lazy="http://placehold.it/350x252" width="350" height="252" /><br>
<img lazy="http://placehold.it/350x253" width="350" height="253" /><br>
<img lazy="http://placehold.it/350x254" width="350" height="254" /><br>
<img lazy="http://placehold.it/350x255" width="350" height="255" /><br>
<img lazy="http://placehold.it/350x256" width="350" height="256" /><br>
<img lazy="http://placehold.it/350x257" width="350" height="257" /><br>
<img lazy="http://placehold.it/350x258" width="350" height="258" /><br>
<img lazy="http://placehold.it/350x259" width="350" height="259" /><br>
<img lazy="http://placehold.it/351x250" width="351" height="250" /><br>
<img lazy="http://placehold.it/352x250" width="352" height="250" /><br>
<img lazy="http://placehold.it/353x250" width="353" height="250" /><br>
<img lazy="http://placehold.it/354x250" width="354" height="250" /><br>
<img lazy="http://placehold.it/355x250" width="355" height="250" /><br>
<img lazy="http://placehold.it/356x250" width="356" height="250" /><br>
<img lazy="http://placehold.it/357x250" width="357" height="250" /><br>
<img lazy="http://placehold.it/358x250" width="358" height="250" /><br>
<img lazy="http://placehold.it/359x250" width="359" height="250" /><br>
<img lazy="http://placehold.it/351x251" width="351" height="251" /><br>
<img lazy="http://placehold.it/351x252" width="351" height="252" /><br>
<img lazy="http://placehold.it/351x253" width="351" height="253" /><br>
<img lazy="http://placehold.it/250x250" width="250" height="250" /><br>
<img lazy="http://placehold.it/250x251" width="250" height="251" /><br>
<img lazy="http://placehold.it/250x252" width="250" height="252" /><br>
<img lazy="http://placehold.it/250x253" width="250" height="253" /><br>
<img lazy="http://placehold.it/250x254" width="250" height="254" /><br>
<img lazy="http://placehold.it/250x255" width="250" height="255" /><br>
<img lazy="http://placehold.it/250x256" width="250" height="256" /><br>
<img lazy="http://placehold.it/250x257" width="250" height="257" /><br>
<img lazy="http://placehold.it/250x258" width="250" height="258" /><br>
<img lazy="http://placehold.it/250x259" width="250" height="259" /><br>
<img lazy="http://placehold.it/251x250" width="251" height="250" /><br>
<img lazy="http://placehold.it/252x250" width="252" height="250" /><br>
<img lazy="http://placehold.it/253x250" width="253" height="250" /><br>
<img lazy="http://placehold.it/254x250" width="254" height="250" /><br>
<img lazy="http://placehold.it/255x250" width="255" height="250" /><br>
<img lazy="http://placehold.it/256x250" width="256" height="250" /><br>
<img lazy="http://placehold.it/257x250" width="257" height="250" /><br>
<img lazy="http://placehold.it/258x250" width="258" height="250" /><br>
<img lazy="http://placehold.it/259x250" width="259" height="250" /><br>
<img lazy="http://placehold.it/251x251" width="251" height="251" /><br>
<img lazy="http://placehold.it/251x252" width="251" height="252" /><br>
<img lazy="http://placehold.it/251x253" width="251" height="253" /><br>
</body>
</html>
@chulman444
Copy link
Author

chulman444 commented Feb 4, 2018

The original code called a script from

This was something I didn't know. This will appear as src(unknown) something like that then trigger onerror.

The original had src instead of lazy attributes.

I just wanted to try if 'different version' works.

Was a good chance to get to know about lazy loading and stuff.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment