Articles tagged 'Lazy Load'

Blog Projects

Lazy Load 1.9.0 Released

CSS background images

You can now lazyload CSS background images. Bind the plugin to non image element and it will automatically change the background-image style attribute when element is scrolled into view. You can also use effects.

<div class="lazy" data-original="img/bmw_m1_hood.jpg" style="background-image: url('img/grey.gif'); width: 765px; height: 574px;"></div>

$("div.lazy").lazyload({
    effect : "fadeIn"
});

Continue reading >>


Lazy Load 1.8.0 Released

This version of Lazy Load is just a bugfix release. Minor release number bump is there because I pulled a new feature in last minute and I did not want to mess up my git branching. Bugfix usually does not normally warrant for the minor bump.

Bugs fixed

Plugin now works correctly when using many instances and they have different container.

$("#column-1 img").lazyload({ container: $("#column-1") });
$("#column-2 img").lazyload({ container: $("#column-2") });
$("#column-3 img").lazyload({ container: $("#column-3") });

Continue reading >>


Lazy Load 1.7.0 Released

Previous version of Lazy Load gained traction pretty fast. Good patches were submitted to GitHub. This version of plugin mostly concentrates on speed optimization and event handlers.

New Events

Two new events were added. Handler for appear event is called when image appears to viewport but before it is loaded. Handler for load event is called when image is loaded. Both event handler receive two parameters. First parameter elements_left is numbers of images left to load. Second parameter settings is the settings passed to Lazy Load plugin. Inside both handlers this refers to the image dom element.

$("img.lazy").lazyload({
    appear : function(elements_left, settings) {
        console.log(this, elements_left, settings);
    },
    load : function(elements_left, settings) {
        console.log(this, elements_left, settings);
    }
});

Continue reading >>


Lazy Load 1.6.0 Released

After neglecting the code for a while I was finally able to release new version of Lazy Load plugin. Changes are not dramatic but there is one important thing. New browsers load image even if you remove the src attribute with JavaScript. Because of this you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>

All code regarding the old behavior where you could just include plugin code in your page and it would automagically lazyload your images was removed.

Continue reading >>


Tuning Lazy Loader

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>
Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. For more information read the documentation.

I just committed two patches to Lazy Load plugin sent by users. Jeremy Pollock contributed a patch improving scroll behaviour. Before when you scrolled quickly long way down all images above the browser top were loaded. New behavior is to load only those which are currently visible on the screen.

Continue reading >>


Lazy Load Inside Container

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real image url should be stored data-original attribute.

<img data-original=“img/example.jpg” src=“img/grey.gif”>
Good thing is you can now put all your JavaScript to the end of the page. If you want to support non JavaScript browsers there is an extra step. You must include original image inside <noscript> tag. For more information read the documentation.

Matthew Crumley contributed nice patch to Lazy Load plugin which makes it work with containers. If you have a container which has a scrollbar.

#container {
    height: 600px;
    overflow: scroll;
}

Continue reading >>


Lazy Load With Effects

Latest version of Lazy Load is not a drop in replacement to your webpage. New browsers load image even if you remove the src attribute with JavaScript. Now you must alter your html code. Put placeholder image into src attribute of your img tag. Real...

Continue reading >>


Lazy Load Sideways

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Lazy Load plugin has been quite popular recently. Atleast two Prototype ports have been created. First one by Edd Couchmann. Second one by Bram Van Damme. Congrats guys. Now Prototype people can enjoy lazy loading sweetness too.

I just added most requested feature. Sideways lazy loading of images in wide pages. I guess you could also call it right of fold.

Continue reading >>


Lazy Load Images jQuery Plugin

HEADS UP! This article was written in 2007. Information provided might not be valid anymore and should be taken with a grain of salt.

Lazyloader is inspired by YUI ImageLoader Utility by Matt Mlinac. After reading YUI introduction I though this is cool! After reading through source thought changed to this needs some jQuery simplicity So I stole borrowed couple of great ideas from Matt’s code. Result is Lazy Load plugin for jQuery.

Continue reading >>


CATEGORIES
Built using the awesome Flat UI Pro framework by Designmodo.

Mika Tuupola is a Member of the Leanpub Affiliate Program.

© 2014 Mika Tuupola.