Created
August 16, 2015 16:13
-
-
Save matsuhisa/96183b76680d8eb14cbb to your computer and use it in GitHub Desktop.
画像についてclassの指定がある画像について、あとで読み込む
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<html> | |
<head> | |
<title>js - test</title> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
<script> | |
$(function() { | |
class_name = 'lazy_image'; | |
var substitute_image = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0E5NjM5MDMzQzI0MTFFNTkzOTVDNjBCNTAzMUFDNDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E5NjM5MDQzQzI0MTFFNTkzOTVDNjBCNTAzMUFDNDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQTk2MzkwMTNDMjQxMUU1OTM5NUM2MEI1MDMxQUM0NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQTk2MzkwMjNDMjQxMUU1OTM5NUM2MEI1MDMxQUM0NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt2aYJgAAAAGUExURfmTkgAAABYVhfEAAAAjSURBVHja7MGBAAAAAMOg+VNf4QBVAQAAAAAAAAAAAI8JMAAndAABi7SX2gAAAABJRU5ErkJggg=="; | |
var original_images_src = new Array(); | |
var new_images = new Array(); | |
$("img." + class_name).each(function(i, object){ | |
original_images_src[i] = $(object).attr('src'); | |
$(object).attr('src', substitute_image); | |
$(new Image()).attr('src', original_images_src[i]).bind('load', function(){ | |
console.log(original_images_src[i]); | |
console.log(this.width); | |
console.log(this.height); | |
$(object).attr('src', original_images_src[i]); | |
}); | |
}); | |
}); | |
</script> | |
</head> | |
<body> | |
<p> | |
<img src="https://farm1.staticflickr.com/542/19839122619_c7fb67e012_c.jpg" class="lazy_image"> | |
</p> | |
<p> | |
<img src="https://farm1.staticflickr.com/276/19296376993_c3f3d4a0fb_c.jpg" class="lazy_image"> | |
</p> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment