jQuery inview example
jQuery 확장 선택자 inView 를 이용한 LazyLoad based on http://jsfiddle.net/riix/Z9uaX/
by lovromar
HTML
<div id="list">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm2.static.flickr.com/1395/530815732_591e117af0_m.jpg" width="240" height="180">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm2.static.flickr.com/1006/533314156_5a8f3aae47_m.jpg" width="205" height="240">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm1.static.flickr.com/202/517143876_262ef0223c_m.jpg" width="240" height="192">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm3.static.flickr.com/2414/1800544122_cc4f9c1b86_m.jpg" width="208" height="240">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm3.static.flickr.com/2130/2534664596_59887ab28c_m.jpg" width="177" height="240">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm2.static.flickr.com/1342/743809708_6432c78fee_m.jpg" width="223" height="240">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm2.static.flickr.com/1064/771724890_f8fc22a89a_m.jpg" width="240" height="216">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm3.static.flickr.com/2307/1516071079_682ad620c4_m.jpg" width="180" height="240">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm4.static.flickr.com/3119/2699841820_a7ec988c10_m.jpg" width="240" height="133">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm2.static.flickr.com/1084/650361412_e6acdf5607_m.jpg" width="240" height="180">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="http://farm1.static.flickr.com/196/491476118_4f8095b946_m.jpg" width="240" height="193">
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="...JavaScript
$.extend($.expr[':'],{
inView: function(el) {
var $el = $(el), _jqWinHeight = $(window).height();
var _scrollTop = (document.documentElement.scrollTop || document.body.scrollTop),
_offsetTop = $el.offset().top,
_winHeight = (window.innerHeight && window.innerHeight < _jqWinHeight) ? window.innerHeight : _jqWinHeight;
return _offsetTop > _scrollTop && ($el.height() + _offsetTop) < (_scrollTop + _winHeight);
}
});
$.fn.eachQ = (function(){
var jq = $([1]);
return function(c) {
var i = -1, el, len = this.length;
try {
while (
++i < len &&
(el = jq[0] = this[i]) &&
c.call(jq, i, el) !== false
);
} catch(e){
delete jq[0];
throw e;
}
delete jq[0];
return this;
};
}());
$(function(){
// 초기화
var $default = $('img[data-src]:not([http^="http://"]');
$default.addClass('lazy').css('opacity','0');
$(window).trigger('resize');
});
$(window).on('resize scroll', function(){
$('img.lazy:inView').eachQ(function(i){
this.removeClass('lazy').attr('src', this.data('src')).delay(80*(i-1)).animate({
opacity : '1'
});
});
});