Skip to content

Instantly share code, notes, and snippets.

@arkadylukashov
Created January 21, 2013 14:39
Show Gist options
  • Save arkadylukashov/4586515 to your computer and use it in GitHub Desktop.
Save arkadylukashov/4586515 to your computer and use it in GitHub Desktop.
Simple image preloader uses jQuery and Piecon
/* piecon */
(function(){var i={},j=null,k=null,f=null,g=null,h={},l={color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:!1},c,o=navigator.userAgent.toLowerCase();c=function(e){return-1!==o.indexOf(e)};var p=c("msie");c("chrome");c("chrome")||c("safari");var q=c("safari")&&!c("chrome");c("mozilla")&&!c("chrome")&&c("safari");var m=function(e){for(var a=document.getElementsByTagName("link"),c=document.getElementsByTagName("head")[0],f=0,h=a.length;f<h;f++)("icon"===a[f].getAttribute("rel")||"shortcut icon"===
a[f].getAttribute("rel"))&&c.removeChild(a[f]);a=document.createElement("link");a.type="image/x-icon";a.rel="icon";a.href=e;document.getElementsByTagName("head")[0].appendChild(a)},n=function(){g||(g=document.createElement("canvas"),g.width=16,g.height=16);return g};i.setOptions=function(e){h={};for(var a in l)h[a]=e.hasOwnProperty(a)?e[a]:l[a];return this};i.setProgress=function(e){f||(f=document.title);if(!k||!j){var a;a:{a=document.getElementsByTagName("link");for(var c=0,i=a.length;c<i;c++)if("icon"===
a[c].getAttribute("rel")||"shortcut icon"===a[c].getAttribute("rel")){a=a[c];break a}a=!1}k=j=a?a.getAttribute("href"):"/favicon.ico"}if(!isNaN(parseFloat(e))&&isFinite(e))if(!n().getContext||p||q||!0==h.fallback)document.title=0<e?"("+e+"%) "+f:f;else{"force"===h.fallback&&(document.title=0<e?"("+e+"%) "+f:f);var g=e,b=n(),d=b.getContext("2d"),g=g||0,e=j;a=new Image;a.onload=function(){if(d){d.clearRect(0,0,16,16);d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/
2,b.height/2),0,Math.PI*2,false);d.fillStyle=h.shadow;d.fill();d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,0,Math.PI*2,false);d.fillStyle=h.background;d.fill();if(g>0){d.beginPath();d.moveTo(b.width/2,b.height/2);d.arc(b.width/2,b.height/2,Math.min(b.width/2,b.height/2)-2,-0.5*Math.PI,(-0.5+2*g/100)*Math.PI,false);d.lineTo(b.width/2,b.height/2);d.fillStyle=h.color;d.fill()}m(b.toDataURL())}};e.match(/^data/)||(a.crossOrigin="anonymous");
a.src=e}else return!1};i.reset=function(){f&&(document.title=f);k&&(j=k,m(j))};i.setOptions(l);window.Piecon=i})();
/* preloader */
(function($) {
$.fn.preload = function(forPreload, options) {
var settings = $.extend({
debug : false,
percentage : {
textCnt : '',
lineCnt : ''
},
piecon: {
enable: true,
options:{
color: '#ff0084', // Pie chart color
background: '#bbb', // Empty pie chart color
shadow: '#fff', // Outer ring color
fallback: 'force' // Toggles displaying percentage in the title bar (possible values - true, false, 'force')
}
},
onBuild: $.noop,
onComplete : $.noop
}, options);
var items = new Array(),
errors = new Array(),
success = new Array(),
current = 0,
root = this,
// all methods
methods = {
run : function() {
settings.onBuild();
if (settings.piecon.enable) {
Piecon.setOptions(settings.piecon.options)
}
// if no items, please exit..
if (!forPreload || forPreload.length == 0)
return methods.loadComplete();
items = forPreload;
// go
for (var i = 0; i < items.length; i++) {
methods.loadImg(items[i]);
}
},
loadImg : function(url) {
// loading...
var imgLoad = new Image();
$(imgLoad)
.load(function() {
success.push($(this).attr('src'))
methods.completeLoading();
})
.error(function() {
errors.push($(this).attr('src'));
methods.completeLoading();
})
.attr('src', url);
},
completeLoading : function() {
current++;
// get current percentage
var percent = Math.round((current / items.length) * 100);
// update percents
methods.updatePercents(percent);
// stop or continue
if(current >= items.length) {
current = items.length;
if (settings.debug) {
methods.debug();
}
methods.loadComplete();
}
},
loadComplete: function() {
methods.updatePercents(100, settings.onComplete.call(root))
if (settings.piecon.enable) {
Piecon.reset();
}
},
updatePercents: function(percent, callback) {
if (settings.piecon.enable) {
Piecon.setProgress(percent);
}
$(settings.percentage.lineCnt)
.stop()
.animate(
{
width: percent + '%'
},
300,
function() {
if (callback) callback()
}
);
$(settings.percentage.textCnt).text(percent+"%");
},
debug: function() {
if (!$.browser.msie) {
console.log('Preloader Debugger\n==================');
// success
console.groupCollapsed('Successful load',success.length,'images')
if (success.length==0) {
console.log('Global fail... =(');
} else {
$.each(success, function(i,v) {
console.log(v)
})
}
console.groupEnd();
// errors
console.group('Error load',errors.length,'images')
if (errors.length==0) {
console.log('No errors');
} else {
$.each(errors, function(i,v) {
console.log(v)
})
}
console.groupEnd();
}
}
}
methods.run();
return this;
};
})(jQuery);
(function(e){e.fn.preload=function(t,n){var r=e.extend({debug:false,percentage:{textCnt:"",lineCnt:""},piecon:{enable:true,options:{color:"#ff0084",background:"#bbb",shadow:"#fff",fallback:"force"}},onBuild:e.noop,onComplete:e.noop},n);var i=new Array,s=new Array,o=new Array,u=0,a=this,f={run:function(){r.onBuild();if(r.piecon.enable){Piecon.setOptions(r.piecon.options)}if(!t||t.length==0)return f.loadComplete();i=t;for(var e=0;e<i.length;e++){f.loadImg(i[e])}},loadImg:function(t){var n=new Image;e(n).load(function(){o.push(e(this).attr("src"));f.completeLoading()}).error(function(){s.push(e(this).attr("src"));f.completeLoading()}).attr("src",t)},completeLoading:function(){u++;var e=Math.round(u/i.length*100);f.updatePercents(e);if(u>=i.length){u=i.length;if(r.debug){f.debug()}f.loadComplete()}},loadComplete:function(){f.updatePercents(100,r.onComplete.call(a));if(r.piecon.enable){Piecon.reset()}},updatePercents:function(t,n){if(r.piecon.enable){Piecon.setProgress(t)}e(r.percentage.lineCnt).stop().animate({width:t+"%"},300,function(){if(n)n()});e(r.percentage.textCnt).text(t+"%")},debug:function(){if(!e.browser.msie){console.log("Preloader Debugger\n==================");console.groupCollapsed("Successful load",o.length,"images");if(o.length==0){console.log("Global fail... =(")}else{e.each(o,function(e,t){console.log(t)})}console.groupEnd();console.group("Error load",s.length,"images");if(s.length==0){console.log("No errors")}else{e.each(s,function(e,t){console.log(t)})}console.groupEnd()}}};f.run();return this}})(jQuery)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment