320 lines
14 KiB
JavaScript
320 lines
14 KiB
JavaScript
/*!
|
||
* An jQuery | zepto plugin for lazy loading images.
|
||
* author -> jieyou
|
||
* see https://github.com/jieyou/lazyload
|
||
* use some tuupola's code https://github.com/tuupola/jquery_lazyload (BSD)
|
||
* use component's throttle https://github.com/component/throttle (MIT)
|
||
*/
|
||
;(function(factory){
|
||
if(typeof define === 'function' && define.amd){ // AMD
|
||
// you may need to change `define([------>'jquery'<------], factory)`
|
||
// if you use zepto, change it rely name, such as `define(['zepto'], factory)`
|
||
define(['jquery'], factory)
|
||
// define(['zepto'], factory)
|
||
}else{ // Global
|
||
factory(window.jQuery || window.Zepto)
|
||
}
|
||
})(function($,undefined){
|
||
var w = window,
|
||
$window = $(w),
|
||
defaultOptions = {
|
||
threshold : 0,
|
||
failure_limit : 0,
|
||
event : 'scroll',
|
||
effect : 'show',
|
||
effect_params : null,
|
||
container : w,
|
||
data_attribute : 'original',
|
||
data_srcset_attribute : 'original-srcset',
|
||
skip_invisible : true,
|
||
appear : emptyFn,
|
||
load : emptyFn,
|
||
vertical_only : false,
|
||
check_appear_throttle_time : 300,
|
||
url_rewriter_fn : emptyFn,
|
||
no_fake_img_loader : false,
|
||
placeholder_data_img : 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC',
|
||
// for IE6\7 that does not support data image
|
||
placeholder_real_img : 'http://ditu.baidu.cn/yyfm/lazyload/0.0.1/img/placeholder.png'
|
||
// todo : 将某些属性用global来配置，而不是每次在$(selector).lazyload({})内配置
|
||
},
|
||
type // function
|
||
|
||
function emptyFn(){}
|
||
|
||
type = (function(){
|
||
var object_prototype_toString = Object.prototype.toString
|
||
return function(obj){
|
||
// todo: compare the speeds of replace string twice or replace a regExp
|
||
return object_prototype_toString.call(obj).replace('[object ','').replace(']','')
|
||
}
|
||
})()
|
||
|
||
function belowthefold($element, options){
|
||
var fold
|
||
if(options._$container == $window){
|
||
fold = ('innerHeight' in w ? w.innerHeight : $window.height()) + $window.scrollTop()
|
||
}else{
|
||
fold = options._$container.offset().top + options._$container.height()
|
||
}
|
||
return fold <= $element.offset().top - options.threshold
|
||
}
|
||
|
||
function rightoffold($element, options){
|
||
var fold
|
||
if(options._$container == $window){
|
||
// Zepto do not support `$window.scrollLeft()` yet.
|
||
fold = $window.width() + ($.fn.scrollLeft?$window.scrollLeft():w.pageXOffset)
|
||
}else{
|
||
fold = options._$container.offset().left + options._$container.width()
|
||
}
|
||
return fold <= $element.offset().left - options.threshold
|
||
}
|
||
|
||
function abovethetop($element, options){
|
||
var fold
|
||
if(options._$container == $window){
|
||
fold = $window.scrollTop()
|
||
}else{
|
||
fold = options._$container.offset().top
|
||
}
|
||
// console.log('abovethetop fold '+ fold)
|
||
// console.log('abovethetop $element.height() '+ $element.height())
|
||
return fold >= $element.offset().top + options.threshold + $element.height()
|
||
}
|
||
|
||
function leftofbegin($element, options){
|
||
var fold
|
||
if(options._$container == $window){
|
||
// Zepto do not support `$window.scrollLeft()` yet.
|
||
fold = $.fn.scrollLeft?$window.scrollLeft():w.pageXOffset
|
||
}else{
|
||
fold = options._$container.offset().left
|
||
}
|
||
return fold >= $element.offset().left + options.threshold + $element.width()
|
||
}
|
||
|
||
function checkAppear($elements, options){
|
||
var counter = 0
|
||
$elements.each(function(i,e){
|
||
var $element = $elements.eq(i)
|
||
if(($element.width() <= 0 && $element.height() <= 0) || $element.css('display') === 'none'){
|
||
return
|
||
}
|
||
function appear(){
|
||
$element.trigger('_lazyload_appear')
|
||
// if we found an image we'll load, reset the counter
|
||
counter = 0
|
||
}
|
||
// If vertical_only is set to true, only check the vertical to decide appear or not
|
||
// In most situations, page can only scroll vertically, set vertical_only to true will improve performance
|
||
if(options.vertical_only){
|
||
if(abovethetop($element, options)){
|
||
// Nothing.
|
||
}else if(!belowthefold($element, options)){
|
||
appear()
|
||
}else{
|
||
if(++counter > options.failure_limit){
|
||
return false
|
||
}
|
||
}
|
||
}else{
|
||
if(abovethetop($element, options) || leftofbegin($element, options)){
|
||
// Nothing.
|
||
}else if(!belowthefold($element, options) && !rightoffold($element, options)){
|
||
appear()
|
||
}else{
|
||
if(++counter > options.failure_limit){
|
||
return false
|
||
}
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
// Remove image from array so it is not looped next time.
|
||
function getUnloadElements($elements){
|
||
return $elements.filter(function(i,e){
|
||
return !$elements.eq(i)._lazyload_loadStarted
|
||
})
|
||
}
|
||
|
||
// throttle : https://github.com/component/throttle , MIT License
|
||
function throttle (func, wait) {
|
||
var ctx, args, rtn, timeoutID // caching
|
||
var last = 0
|
||
|
||
return function throttled () {
|
||
ctx = this
|
||
args = arguments
|
||
var delta = new Date() - last
|
||
if (!timeoutID)
|
||
if (delta >= wait) call()
|
||
else timeoutID = setTimeout(call, wait - delta)
|
||
return rtn
|
||
}
|
||
|
||
function call () {
|
||
timeoutID = 0
|
||
last = +new Date()
|
||
rtn = func.apply(ctx, args)
|
||
ctx = null
|
||
args = null
|
||
}
|
||
}
|
||
|
||
if(!$.fn.hasOwnProperty('lazyload')){
|
||
|
||
$.fn.lazyload = function(options){
|
||
var $elements = this,
|
||
isScrollEvent,
|
||
isScrollTypeEvent,
|
||
throttleCheckAppear
|
||
|
||
if(!$.isPlainObject(options)){
|
||
options = {}
|
||
}
|
||
|
||
$.each(defaultOptions,function(k,v){
|
||
if($.inArray(k,['threshold','failure_limit','check_appear_throttle_time']) != -1){ // these params can be a string
|
||
if(type(options[k]) == 'String'){
|
||
options[k] = parseInt(options[k],10)
|
||
}else{
|
||
options[k] = v
|
||
}
|
||
}else if(k == 'container'){ // options.container can be a seletor string \ dom \ jQuery object
|
||
if(options.hasOwnProperty(k)){
|
||
if(options[k] == w || options[k] == document){
|
||
options._$container = $window
|
||
}else{
|
||
options._$container = $(options[k])
|
||
}
|
||
}else{
|
||
options._$container = $window
|
||
}
|
||
delete options.container
|
||
}else if(defaultOptions.hasOwnProperty(k) && (!options.hasOwnProperty(k) || (type(options[k]) != type(defaultOptions[k])))){
|
||
options[k] = v
|
||
}
|
||
})
|
||
|
||
isScrollEvent = options.event == 'scroll'
|
||
throttleCheckAppear = options.check_appear_throttle_time == 0?
|
||
checkAppear
|
||
:throttle(checkAppear,options.check_appear_throttle_time)
|
||
|
||
// isScrollTypeEvent cantains custom scrollEvent . Such as 'scrollstart' & 'scrollstop'
|
||
// https://github.com/search?utf8=%E2%9C%93&q=scrollstart
|
||
isScrollTypeEvent = isScrollEvent || options.event == 'scrollstart' || options.event == 'scrollstop'
|
||
|
||
$elements.each(function(i,e){
|
||
var element = this,
|
||
$element = $elements.eq(i),
|
||
placeholderSrc = $element.attr('src'),
|
||
originalSrcInAttr = $element.attr('data-'+options.data_attribute), // `data-original` attribute value
|
||
originalSrc = options.url_rewriter_fn == emptyFn?
|
||
originalSrcInAttr:
|
||
options.url_rewriter_fn.call(element,$element,originalSrcInAttr),
|
||
originalSrcset = $element.attr('data-'+options.data_srcset_attribute),
|
||
isImg = $element.is('img')
|
||
|
||
if($element._lazyload_loadStarted == true || placeholderSrc == originalSrc){
|
||
$element._lazyload_loadStarted = true
|
||
$elements = getUnloadElements($elements)
|
||
return
|
||
}
|
||
|
||
$element._lazyload_loadStarted = false
|
||
|
||
// If element is an img and no src attribute given, use placeholder.
|
||
if(isImg && !placeholderSrc){
|
||
// For browsers that do not support data image.
|
||
$element.one('error',function(){ // `on` -> `one` : IE6 triggered twice error event sometimes
|
||
$element.attr('src',options.placeholder_real_img)
|
||
}).attr('src',options.placeholder_data_img)
|
||
}
|
||
|
||
// When appear is triggered load original image.
|
||
$element.one('_lazyload_appear',function(){
|
||
var effectParamsIsArray = $.isArray(options.effect_params),
|
||
effectIsNotImmediacyShow
|
||
function loadFunc(){
|
||
// In most situations, the effect is immediacy show, at this time there is no need to hide element first
|
||
// Hide this element may cause css reflow, call it as less as possible
|
||
if(effectIsNotImmediacyShow){
|
||
// todo: opacity:0 for fadeIn effect
|
||
$element.hide()
|
||
}
|
||
if(isImg){
|
||
// attr srcset first
|
||
if(originalSrcset){
|
||
$element.attr('srcset', originalSrcset)
|
||
}
|
||
if(originalSrc){
|
||
$element.attr('src', originalSrc)
|
||
}
|
||
}else{
|
||
$element.css('background-image','url("' + originalSrc + '")')
|
||
}
|
||
if(effectIsNotImmediacyShow){
|
||
$element[options.effect].apply($element,effectParamsIsArray?options.effect_params:[])
|
||
}
|
||
$elements = getUnloadElements($elements)
|
||
}
|
||
if(!$element._lazyload_loadStarted){
|
||
effectIsNotImmediacyShow = (options.effect != 'show' && $.fn[options.effect] && (!options.effect_params || (effectParamsIsArray && options.effect_params.length == 0)))
|
||
if(options.appear != emptyFn){
|
||
options.appear.call(element, $element, $elements.length, options)
|
||
}
|
||
$element._lazyload_loadStarted = true
|
||
if(options.no_fake_img_loader || originalSrcset){
|
||
if(options.load != emptyFn){
|
||
$element.one('load',function(){
|
||
options.load.call(element, $element, $elements.length, options)
|
||
})
|
||
}
|
||
loadFunc()
|
||
}else{
|
||
$('<img />').one('load', function(){ // `on` -> `one` : IE6 triggered twice load event sometimes
|
||
loadFunc()
|
||
if(options.load != emptyFn){
|
||
options.load.call(element, $element, $elements.length, options)
|
||
}
|
||
}).attr('src',originalSrc)
|
||
}
|
||
}
|
||
})
|
||
|
||
// When wanted event is triggered load original image
|
||
// by triggering appear.
|
||
if (!isScrollTypeEvent){
|
||
$element.on(options.event, function(){
|
||
if (!$element._lazyload_loadStarted){
|
||
$element.trigger('_lazyload_appear')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
|
||
// Fire one scroll event per scroll. Not one scroll event per image.
|
||
if(isScrollTypeEvent){
|
||
options._$container.on(options.event, function(){
|
||
throttleCheckAppear($elements, options)
|
||
})
|
||
}
|
||
|
||
// Check if something appears when window is resized.
|
||
// Force initial check if images should appear when window is onload.
|
||
$window.on('resize load', function(){
|
||
throttleCheckAppear($elements, options)
|
||
})
|
||
|
||
// Force initial check if images should appear.
|
||
$(function(){
|
||
throttleCheckAppear($elements, options)
|
||
})
|
||
|
||
return this
|
||
}
|
||
}
|
||
}) |