最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
Jquery加载图片代码
时间:2009-03-14 编辑:简简单单 来源:一聚教程网
(function($) {
var defaultOptions = { // Pre-define some default option values.
loadingOnly : false,
placeHolderURL : null,
newWidth : 0,
newHeight : 0,
fadeInSpeed : 0,
containerWidth : 0,
containerHeight : 0,
allowEnlarge : false,
onComplete : null,
onFail : null
};
$.fn.extend(
{
ajaxLoadImg:function(imgURL,options)
{return this.each(function(){return $.ajaxLoadImg(this,imgURL,options); }); },
resizeImg:function(newWidth,newHeight,allowEnlarge)
{return this.each(function(){return $.resizeImg(this,newWidth,newHeight,allowEnlarge); }); },
alignImg:function(containerWidth,containerHeight)
{return this.each(function(){return $.alignImg(this,containerWidth,containerHeight); }); }
}
);
$.ajaxLoadImg = function(loadingImg,imgURL,opt){
loadingImg = $(loadingImg);
if(typeof(imgURL) != 'string' || imgURL == opt.placeHolderURL) return loadingImg; // If it is not an image or imgURL is not set correctly, do nothing.
opt = $.extend( {}, defaultOptions, opt); // Use function opt to override default opt.
loadingImg.load(loadingImgHandler).attr('loadingStatus','loading'); // Set the image status to be loading (in progress).
var newImg = $('').load(newImgHandler).error(newImgHandler).bind('abort',newImgHandler); // Create an new Image object.
!opt.loadingOnly && opt.placeHolderURL ?
newImg.attr('src',opt.placeHolderURL) : newImg.attr('src',imgURL);
return loadingImg;
function newImgHandler(e){
if(newImg.attr('src') == opt.placeHolderURL) // Finish loading the placeholder image
{
loadingImg.attr('src',opt.placeHolderURL);
newImg.attr('src',imgURL);
}else{ // Finish loading the target image
if(e.type == 'abort' || e.type == 'error') //Loading the target image but failed
{
loadingImg.attr('loadingStatus','failed');
if(opt.onFail)
opt.onFail(loadingImg[0]);
}
else if(opt.loadingOnly)
loadingImg.attr('src',newImg.attr('src'));
else
loadingImg.hide().attr('src',newImg.attr('src'));
if(newImg.unbind){
newImg.unbind('load').unbind('error').unbind('abort'); // Some cleanup work
newImg = null;
}
}
}
function loadingImgHandler(e){
if(loadingImg.attr('src') == opt.placeHolderURL)
loadingImg.hide().alignImg(opt.containerWidth,opt.containerHeight).show();
else if(loadingImg.attr('src') == imgURL)
{
if(!opt.loadingOnly)
{
loadingImg.resizeImg(opt.newWidth,opt.newHeight,opt.allowEnlarge)
.alignImg(opt.containerWidth,opt.containerHeight);
opt.fadeInSpeed ? loadingImg.fadeIn(opt.fadeInSpeed) : loadingImg.show();
}
loadingImg.attr('loadingStatus','completed');
if(loadingImg.unbind)
loadingImg.unbind('load').unbind('error').unbind('abort'); // Some cleanup work
if(opt.onComplete)
opt.onComplete(loadingImg[0]);
}
}
};
$.resizeImg=function(objImg,newWidth,newHeight,allowEnlarge){
objImg = $(objImg);
var imgWidth = objImg.width();
var imgHeight = objImg.height();
if(!imgWidth || !imgHeight || !newWidth || !newHeight)
return objImg;
var hRatio,wRatio,Ratio = 1;
wRatio = newWidth / imgWidth;
hRatio = newHeight / imgHeight;
Ratio = (wRatio<=hRatio?wRatio:hRatio);
if (Ratio > 1 && !allowEnlarge)
Ratio = 1;
return objImg.width(imgWidth * Ratio).height(imgHeight * Ratio);
};
$.alignImg=function(objImg,containerWidth,containerHeight){
objImg = $(objImg);
if(!objImg.height() || !objImg.width())
return objImg;
if(objImg.height() < containerHeight - 1)
objImg.css('marginTop',(containerHeight - objImg.height())/2 + 'px');
if(objImg.width() < containerWidth - 1)
objImg.css('margin-left',(containerWidth - objImg.width())/2 + 'px');
return objImg;
};
})(jQuery);
相关文章
- jquery 判断图片加载完毕例子 06-13
- Jquery实现图片的预加载与延时加载 11-16
- Jquery图片等比缩放与Chrome加载图片问题 10-06
- jquery 图片加载效果代码 09-18
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31