Menu
I was browsing around the web and I saw something I've never seen before. on this site: http://blogof.francescomugnai.com/2009/04/mega-roundup-of-geektool-scripts-inspiration-gallery/
When you navigate down the page, the images only load when they are in the visible portion of the browser. I have never seen this before and was wondering if anyone else has and how exactly one would do it.
I'm guessing this is some sort of Wordpress plugin (that's what he's using) but I'm not sure. Is it javascript? Are they actually loading on page load but just become visible later for a "snazzy" effect or is this actually useful for quicker page load times?
865
Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time - when those images are actually needed, instead of loading them up front.
IMG tags can leverage native browser lazy loading, which doesn't require any JavaScript. You can still lazy load background images if they're in HTML as an inline style. Plugins like FlyingPress automatically detect and lazy load them.
Chrome and Firefox both support lazy-loading with the loading attribute. This attribute can be added to <img> elements, and also to <iframe> elements. A value of lazy tells the browser to load the image immediately if it is in the viewport, and to fetch other images when the user scrolls near them.
To lazy load an image, display a lightweight placeholder image, and replace with the real full-size image on scroll. There are several technical approaches to lazy loading images: Inline <img> tags, using JavaScript to populate the tag if image is in viewport. Event handlers such as scroll or resize.
"wp-content/plugins/jquery-image-lazy-loading"
Lazy loader is a jQuery plugin written in JavaScript. It delays loading of images in (long) web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.
Using lazy load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
http://www.appelsiini.net/projects/lazyload
So it seems it goes through every image specified or inside of the context of an element and replaces the src with a placeholder gif before the images fully load, saves the original URI and when the image is "visible" it replaces the placeholder with the real image.
126
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
