HTML、
<div>
<img class="lazyload" alt="" width="1000" data-original="/skin/default/images/BB2.jpg" src="默认图片地址"/>
<img class="lazyload" alt="" width="1000" data-original="/skin/default/images/BB2.jpg" src="默认图片地址"/>
<img class="lazyload" alt="" width="1000" data-original="/skin/default/images/BB2.jpg" src="默认图片地址"/>
<img class="lazyload" alt="" width="1000" data-original="/skin/default/images/BB2.jpg" src="默认图片地址"/>
<img class="lazyload" alt="" width="1000" data-original="/skin/default/images/BB2.jpg" src="默认图片地址"/>
<img class="lazyload" alt="" width="1000" data-original="/skin/default/images/BB2.jpg" src="默认图片地址"/>
</div>lazyload.js
/*!
* 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
}
}
})js
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img.lazyload").lazyload();
});
</script>
扫一扫
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
