لود کردن تصویر (و تصاویر) با پلاگین ساده جیکوئری به همراه loading

[id1385]

سلام
برحسب نیاز یه پلاگین ساده برای لود کردن تصویر و یا تصاویر نوشتم که میزارم اینجا دوستان نیز استفاده کنند :

فایل پلاگین:

(function($) {


var defaults = {
Target: "undefined",
ImageUrl: "data-image",
LoadingImage: "",
ErrorImage: "",
AlertOnError: true,
AlertMsg: "Failed to load image.",
CustomMethod: false,
ChangeSrc: true
};


$.fn.extend({
loadImages: function(options, callback) {
if (options && typeof(options) == 'object') {
options = $.extend({}, defaults, options);
} else {
options = defaults;
}
this.each(function() {
new $.loadImages(options.Target !== "undefined" ? options.Target : this, options, callback);
});
}
});




$.loadImages = function(Obj, oP, callback) {
var isValid = false;
if (typeof oP === "object" && oP.ImageUrl !== "undefined") {
isValid = true;
}
if ($(Obj).length < 1)
isValid = false;




if (!isValid)
return _onError();




_downloadImage();
// download image
function _downloadImage() {
if (oP.ImageUrl === "data-image" || oP.ImageUrl === "data-img" || oP.ImageUrl === "data-src") {


var dataImage = $(Obj).attr(oP.ImageUrl);
if (dataImage === "undefined")
return _onError("invalid image url");
if (!_isValidURL(dataImage)) {
return _onError("invalid image url");
} else {
oP.ImageUrl = dataImage;
}
} else if (oP.CustomMethod) {
oP.ImageUrl = oP.ImageUrl;
} else {
if (!_isValidURL(oP.ImageUrl)) {
return _onError("invalid image url");
}
}


// show loading
_showLoading();


//create image to preload:
var imgPreload = new Image();
$(imgPreload).attr({
src: oP.ImageUrl
});
imgPreload.onerror = function() {
_onError();
}




if (imgPreload.complete || imgPreload.readyState === 4) {
_onSuccess(imgPreload.src);
} else {
//go fetch the image:
$(imgPreload).load(function(response, status, xhr) {
if (status == 'error') {
_onError();
} else {
_onSuccess(imgPreload.src);
}
});
}
}




// show preload image
function _showLoading() {
if (oP.ChangeSrc) {
$(Obj).attr("src", oP.LoadingImage);
} else {
$(Obj).css("background-image", 'url(' + oP.LoadingImage + ')')
}
}


// if success
function _onSuccess(src) {
if (oP.ChangeSrc) {
$(Obj).attr("src", src);
} else {
$(Obj).css("background-image", 'url(' + src + ')')
}
}




// if error
function _onError() {
if (oP.ChangeSrc) {
$(Obj).attr("src", oP.ErrorImage);
} else {
$(Obj).css("background-image", 'url(' + oP.ErrorImage + ')')
}
if (oP.AlertOnError)
alert(oP.AlertMsg ? oP.AlertMsg : "Error while loading image");
}


function _isValidURL(s) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
return regexp.test(s);
}




};


})(jQuery);




توضیحات:
این پلاگین بصورت ساده میاد اول تصویر رو لود میکنه و بعد نمایش میده برای انکار میشه هم مستقیم خود عکس img رو به این پلاگین نسبت داد و یا یک المنت html که بکگراندش عکسه

پارامترهای ورودی این پلاگین:
ImageUrl : آدرس تصویری است که باید لود شود (پیشفرض data-image می باشد)، غیر از اینکه میتوان برای این مورد مستقیم آدرس عکس رو ارجاع داد میتوان یک خصوصیت المنت رو بهش ارجاع داد که آدرس تصویر در ان است مانند لایت باکس، خصوصیاتی رو که میشه بهش ارجاع داد عبارتند از : data-image، data-img، data-src البته همونطور که گفتم این پلاگین در عرض کمتر از چند ساعت نوشته شده و بخاطر همین هم نیازی به حرفه ای تر بودنش نبود و برای این مورد میتوان پلاگین رو ویرایش کرد و خصوصیت خاصی رو بهش ارجاع داد بدون اینکه احصا شده باشه، در هر صورت هرکدام یک از این خصوصیتها که دارای آدرس عکس بود رو میشه به این پارامتر ارجاع داد
نمونه:


<img src="" data-image="../sampe.jpg" />



AlertOnError : اگر خطایی در لود فایل باشد با true قرار دادن این پارامتر پیغام خطا به کاربر نشان داده میشود
AlertMsg : این پیغامی است که اگر پارامتر بالا رو فعال کنید نشان داده خواهد شد پیش فرض: Failed to load image.
Target : المنتی است که عکس در آن نمایش داده میشود که میتواند img یا هر المنتی باشد منتها غیر از img که src آن بر ابر تصویر لود شده است بقیه المنتها background-image برای تصویر می باشد
CustomMethod : اگر المنت غیر از img هست این را برابر true قرار میدهیم و ImageUrl رو برابر آدرس فایل تصویر
ChangeSrc : اگر المنت img هست این را برابر true قرار میدهیم در غیر این صورت false
LoadingImage : فایل تصویری که بهنگام بارگزاری نمایش داده خواهد شد
ErrorImage : اگر بارگزاری با خطا مواجه شد علاوه بر پیام میتوان از تصویر خطا نیز استفاده نمود که این روش پیشنهاد می شود



نمونه استفاده :

var img = '../tpl/images/';
var cimage = $("#captcha_image");
if (cimage.length > 0) {
var params = {
ImageUrl: cap + makeid(11),
AlertOnError: true,
LoadingImage: img + "717.GIF",
ErrorImage: img + "captcha-error.png",
AlertMsg: "کدامنيتي غيرقابل خواندن مي باشد",
CustomMethod: true,
ChangeSrc: false
}
cimage.loadImages(params);
}



موفق باشید