jQuery apear plugin

Simple jquery plugin used to trigger a function when a specific element apears on viewport, this callback is trigged one time.
This plugin is very useful when you what to preload an image when this apears on the viewport.


$('img[osrc]').apear(function(){
			$(this).load(function(){
				$(this).fadeIn();
			});
			$(this).attr('src',$(this).attr('osrc')).attr('osrc',null);
			console.log('apear item');
		});

In this example the image is printed with osrc attribute wich keeps the path to the image, when the apear plugin callback is trigged the osrc attribute is replaced with src attribute and add new event to loaded function to fade in the image.

Other way to use this is when you have multiple boxes ( widgets ) on the page and its not necessary to apply a javascript code to it before to apear in the viewport.


$('.widget-x').apear(initWidgetX);

Download plugin or try the Demo

Leave a Comment.