Skip to content

Commit

Permalink
Update jQuery-cache-images.js
Browse files Browse the repository at this point in the history
  • Loading branch information
@tanm-sys
tanm-sys authored Mar 4, 2024
1 parent b41facb commit 2a16722
Showing 1 changed file with 207 additions and 1 deletion.
208 changes: 207 additions & 1 deletion jQuery-cache-images.js
View file
Original file line number Diff line number Diff line change
@@ -1 +1,207 @@
!function(t){t.fn.cacheImages=function(e){this.cacheImagesConfig=t.extend({},t.fn.cacheImages.defaults,e),this.cacheImagesConfig.encodeOnCanvas="undefined"!=typeof HTMLCanvasElement&&this.cacheImagesConfig.encodeOnCanvas,"boolean"!=typeof this.cacheImagesConfig.forceSave&&(this.cacheImagesConfig.forceSave=!1);var n=this;return"function"==typeof this.cacheImagesConfig.start&&n.cacheImagesConfig.start(this),!1===t.fn.cacheImages.testOutput(this.cacheImagesConfig.defaultImage,!0)&&(this.cacheImagesConfig.defaultSrc=this.cacheImagesConfig.defaultImage),this.each(function(e,a){t.fn.cacheImages.storageAvailable(t(a),e,a,function(e,c){var s,g=t(c);if("IMG"===g.prop("tagName")?(g.data("cachedImageType","src"),s=g.prop("src")||g.data("cachedImageSrc"),null!==n.cacheImagesConfig.url&&(s=n.cacheImagesConfig.url,g.prop("src",""))):(g.data("cachedImageType","css"),s=g.css("background-image").replace(/"/g,"").replace(/url\(|\)$/gi,"")||g.data("cachedImageSrc"),null!==n.cacheImagesConfig.url&&(s=n.cacheImagesConfig.url,g.css("background-image","url()"))),void 0===s)return t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Error - no URI to load"),n.cacheImagesConfig.fail.call(this),n.cacheImagesConfig.always.call(this),!0;if(void 0!==g.prop("src")&&t.fn.cacheImages.testOutput(g.prop("src"),!0))return t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: already displaying cached image"),n.cacheImagesConfig.done.call(this),n.cacheImagesConfig.always.call(this),!0;var a=n.cacheImagesConfig.storagePrefix+":"+s;t.fn.cacheImages.get(g,a,function(a,e){if(0==n.cacheImagesConfig.forceSave&&e&&t.fn.cacheImages.testOutput(e,!0))return this.data("cachedImageSrc",s),"src"==this.data("cachedImageType")?this.prop("src",e):this.css("background-image","url("+e+")"),t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Already Encoded"),n.cacheImagesConfig.done.call(this,e),void n.cacheImagesConfig.always.call(this);if("pending"===e)return t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Caching in Progress - "+s),n.cacheImagesConfig.fail.call(this),void n.cacheImagesConfig.always.call(this);"src"==this.data("cachedImageType")?this.prop("src",""):this.css("background-image","url()");e=s.match(/\.(jpg|jpeg|png|gif)$/i);if(e&&e.length&&(e="jpg"==e[1].toLowerCase()?"jpeg":e[1].toLowerCase()),void 0===e)return n.cacheImagesConfig.fail.call(this),void n.cacheImagesConfig.always.call(this);this.data("cachedImageSrc",s),t.fn.cacheImages.set(this,a,"pending",function(e,a){}),n.cacheImagesConfig.encodeOnCanvas&&"gif"!==e?(t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Preparing to Cache : canvas - "+s),g.on("load",function(){newSrc=t.fn.cacheImages.base64EncodeCanvas(c),t.fn.cacheImages.set(this,a,newSrc),t.fn.cacheImages.testOutput(newSrc,!0)?("src"==this.data("cachedImageType")?this.prop("src",newSrc):this.css("background-image","url("+newSrc+")"),this.is(".cacheImagesRemove")&&this.remove(),n.cacheImagesConfig.done.call(this,newSrc)):n.cacheImagesConfig.fail.call(this),n.cacheImagesConfig.always.call(this)})):(t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Preparing to Cache : base64 - "+s),t.fn.cacheImages.base64EncodeImg(c,function(e){t.fn.cacheImages.set(this,a,e,function(){this.is(".cacheImagesRemove")&&this.remove(),"src"==this.data("cachedImageType")?this.prop("src",e):this.css("background-image","url("+e+")"),n.cacheImagesConfig.done.call(this,e),n.cacheImagesConfig.always.call(this)})}))})})})},t.fn.cacheImages.defaults={storagePrefix:"FV-cacheImage",url:null,forceSave:!1,defaultImage:null,encodeOnCanvas:!1,done:function(){},fail:function(){},always:function(){},start:function(){},debug:!1},t.fn.cacheImages.storageAvailable=function(e,a,c,s){if("undefined"==typeof localStorage)return t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Error - No Storage Support"),t.fn.cacheImages.defaults.fail.call(this,"FV.cacheImage: Error - No Storage Support"),t.fn.cacheImages.defaults.always.call(this),!1;s(a,c)},t.fn.cacheImages.base64EncodeImg=function(e,c){var s=new Image;s.onload=function(){var e=document.createElement("CANVAS"),a=e.getContext("2d");e.height=s.height,e.width=s.width,a.drawImage(s,0,0),c(e.toDataURL("image/png")),e=null},s.src=e.src},t.fn.cacheImages.base64EncodeCanvas=function(e){var a=document.createElement("CANVAS"),c=a.getContext("2d");return a.height=e.height,a.width=e.width,c.drawImage(e,0,0),e=a.toDataURL("image/png"),a=null,e},t.fn.cacheImages.testOutput=function(e,a){return void 0!==e&&(!0!==a||""!==e)},t.fn.cacheImages.set=function(e,a,c,s){try{localStorage.setItem(a,c),t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Stored - "+a),s(a,c)}catch(e){t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Failed - "+a),s(a,c)}},t.fn.cacheImages.get=function(e,a,c){try{var s=localStorage.getItem(a);c(a,null!=s&&s)}catch(e){t.fn.cacheImages.defaults.debug&&console.log("FV.cacheImage: Failed Retrieval - "+a),c(a,!1)}}}(jQuery);
!(function ($) {
$.fn.cacheImages = function (options) {
this.cacheImagesConfig = $.extend({}, $.fn.cacheImages.defaults, options);
this.cacheImagesConfig.encodeOnCanvas =
typeof HTMLCanvasElement !== 'undefined' && this.cacheImagesConfig.encodeOnCanvas;
this.cacheImagesConfig.forceSave = typeof this.cacheImagesConfig.forceSave === 'boolean' ? this.cacheImagesConfig.forceSave : false;

const self = this;

if (typeof this.cacheImagesConfig.start === 'function') {
this.cacheImagesConfig.start(this);
}

if (!$.fn.cacheImages.testOutput(this.cacheImagesConfig.defaultImage, true)) {
this.cacheImagesConfig.defaultSrc = this.cacheImagesConfig.defaultImage;
}

this.each(function (index, element) {
$.fn.cacheImages.storageAvailable($(element), index, element, function (index, element) {
const $element = $(element);
let src;
if ($element.prop('tagName') === 'IMG') {
$element.data('cachedImageType', 'src');
src = $element.prop('src') || $element.data('cachedImageSrc');
if (self.cacheImagesConfig.url !== null) {
src = self.cacheImagesConfig.url;
$element.prop('src', '');
}
} else {
$element.data('cachedImageType', 'css');
src = $element.css('background-image').replace(/"/g, '').replace(/url\(|\)$/gi, '') || $element.data('cachedImageSrc');
if (self.cacheImagesConfig.url !== null) {
src = self.cacheImagesConfig.url;
$element.css('background-image', 'url()');
}
}

if (src === undefined) {
console.error('FV.cacheImage: Error - no URI to load');
self.cacheImagesConfig.fail.call(this);
self.cacheImagesConfig.always.call(this);
return true;
}

if (src !== undefined && $.fn.cacheImages.testOutput($element.prop('src'), true)) {
console.log('FV.cacheImage: already displaying cached image');
self.cacheImagesConfig.done.call(this);
self.cacheImagesConfig.always.call(this);
return true;
}

const storageKey = `${self.cacheImagesConfig.storagePrefix}:${src}`;
$.fn.cacheImages.get($element, storageKey, function (key, cachedData) {
if (
self.cacheImagesConfig.forceSave === 0 &&
cachedData &&
$.fn.cacheImages.testOutput(cachedData, true)
) {
this.data('cachedImageSrc', src);
if (this.data('cachedImageType') === 'src') {
this.prop('src', cachedData);
} else {
this.css('background-image', `url(${cachedData})`);
}
console.log('FV.cacheImage: Already Encoded');
self.cacheImagesConfig.done.call(this, cachedData);
self.cacheImagesConfig.always.call(this);
} else if (cachedData === 'pending') {
console.log(`FV.cacheImage: Caching in Progress - ${src}`);
self.cacheImagesConfig.fail.call(this);
self.cacheImagesConfig.always.call(this);
} else {
if (this.data('cachedImageType') === 'src') {
this.prop('src', '');
} else {
this.css('background-image', 'url()');
}
const imageTypeMatch = src.match(/\.(jpg|jpeg|png|gif)$/i);
let imageType;
if (imageTypeMatch && imageTypeMatch.length) {
imageType = imageTypeMatch[1].toLowerCase() === 'jpg' ? 'jpeg' : imageTypeMatch[1].toLowerCase();
}
if (imageType === undefined) {
self.cacheImagesConfig.fail.call(this);
self.cacheImagesConfig.always.call(this);
return;
}
this.data('cachedImageSrc', src);
$.fn.cacheImages.set(this, storageKey, 'pending', function (key, data) {});
if (self.cacheImagesConfig.encodeOnCanvas && imageType !== 'gif') {
console.log(`FV.cacheImage: Preparing to Cache : canvas - ${src}`);
$element.on('load', function () {
const newSrc = $.fn.cacheImages.base64EncodeCanvas(this);
$.fn.cacheImages.set(this, storageKey, newSrc);
if ($.fn.cacheImages.testOutput(newSrc, true)) {
if (this.data('cachedImageType') === 'src') {
this.prop('src', newSrc);
} else {
this.css('background-image', `url(${newSrc})`);
}
if (this.is('.cacheImagesRemove')) {
this.remove();
}
self.cacheImagesConfig.done.call(this, newSrc);
} else {
self.cacheImagesConfig.fail.call(this);
}
self.cacheImagesConfig.always.call(this);
});
} else {
console.log(`FV.cacheImage: Preparing to Cache : base64 - ${src}`);
$.fn.cacheImages.base64EncodeImg(this, function (newSrc) {
$.fn.cacheImages.set(this, storageKey, newSrc, function () {
if (this.is('.cacheImagesRemove')) {
this.remove();
}
if (this.data('cachedImageType') === 'src') {
this.prop('src', newSrc);
} else {
this.css('background-image', `url(${newSrc})`);
}
self.cacheImagesConfig.done.call(this, newSrc);
self.cacheImagesConfig.always.call(this);
});
});
}
}
});
});
}

return this;
};

$.fn.cacheImages.defaults = {
storagePrefix: 'FV-cacheImage',
url: null,
forceSave: false,
defaultImage: null,
encodeOnCanvas: false,
done: function () {},
fail: function () {},
always: function () {},
start: function () {},
debug: false,
};

$.fn.cacheImages.storageAvailable = function ($element, index, element, callback) {
if (typeof localStorage === 'undefined') {
console.error('FV.cacheImage: Error - No Storage Support');
$.fn.cacheImages.defaults.fail.call(this, 'FV.cacheImage: Error - No Storage Support');
$.fn.cacheImages.defaults.always.call(this);
return false;
}

callback(index, element);
};

$.fn.cacheImages.base64EncodeImg = function (element, callback) {
const image = new Image();
image.onload = function () {
const canvas = document.createElement('CANVAS');
const context = canvas.getContext('2d');
canvas.height = image.height;
canvas.width = image.width;
context.drawImage(image, 0, 0);
callback(canvas.toDataURL('image/png'));
};
image.src = element.src;
};

$.fn.cacheImages.base64EncodeCanvas = function (element) {
const canvas = document.createElement('CANVAS');
const context = canvas.getContext('2d');
canvas.height = element.height;
canvas.width = element.width;
context.drawImage(element, 0, 0);
return canvas.toDataURL('image/png');


};

$.fn.cacheImages.testOutput = function (output, checkValue) {
return output !== undefined && (checkValue !== true || output !== '');
};

$.fn.cacheImages.set = function (element, key, data, callback) {
try {
localStorage.setItem(key, data);
console.log(`FV.cacheImage: Stored - ${key}`);
callback(key, data);
} catch (error) {
console.error(`FV.cacheImage: Failed - ${key}`);
callback(key, data);
}
};

$.fn.cacheImages.get = function (element, key, callback) {
try {
const cachedData = localStorage.getItem(key);
callback(key, cachedData !== null && cachedData);
} catch (error) {
console.error(`FV.cacheImage: Failed Retrieval - ${key}`);
callback(key, false);
}
};
})(jQuery);

0 comments on commit 2a16722

Please sign in to comment.