Skip to content

Instantly share code, notes, and snippets.

@devxoul
Created August 16, 2013 02:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save devxoul/6246775 to your computer and use it in GitHub Desktop.
Save devxoul/6246775 to your computer and use it in GitHub Desktop.
A jQuery plugin that allows you to load images asynchronously. <img class="async" src="PLACEHOLDER IMAGE URL HERE" async-src="ORIGINAL IMAGE URL HERE"> $(img.async).loadasync();
/*
* jquery.loadasync.js
*
* DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
* Version 2, December 2004
*
* Copyright (C) 2013 Su Yeol Jeon
*
* Everyone is permitted to copy and distribute verbatim or modified
* copies of this license document, and changing it is allowed as long
* as the name is changed.
*
* DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
* TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
*
* 0. You just DO WHAT THE FUCK YOU WANT TO.
*
*/
(function($) {
var queue = [];
$.fn.loadasync = function() {
queue.length = 0;
this.each(function() {
queue.push(this);
});
if(queue.length) {
_loadImage(queue.shift());
}
return this;
};
function _loadImage(img) {
var image = $(img);
var url = image.attr('async-src');
$.ajax({
url: url,
cache: true,
processData: false,
contentType: 'image/jpeg',
success: function(data) {
image.attr('src', url);
if(queue.length) {
_loadImage(queue.shift());
}
}
});
}
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment