matsuhisa/lazy_image.html

## lazy_image.html
<html>
<head>
<title>js - test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
  var original_src = $("img.lazy_image").attr("src");

  $("img.lazy_image").attr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0E5NjM5MDMzQzI0MTFFNTkzOTVDNjBCNTAzMUFDNDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E5NjM5MDQzQzI0MTFFNTkzOTVDNjBCNTAzMUFDNDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQTk2MzkwMTNDMjQxMUU1OTM5NUM2MEI1MDMxQUM0NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQTk2MzkwMjNDMjQxMUU1OTM5NUM2MEI1MDMxQUM0NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt2aYJgAAAAGUExURfmTkgAAABYVhfEAAAAjSURBVHja7MGBAAAAAMOg+VNf4QBVAQAAAAAAAAAAAI8JMAAndAABi7SX2gAAAABJRU5ErkJggg==");

  var new_image = $(new Image());
  new_image.attr('src', original_src);
  new_image.bind('load', function(){
    console.log(this.width);
    console.log(this.height);
    $("img.lazy_image").attr('src', original_src);
  });
});
</script>
</head>
<body>

<p>
遅延読み込み<br>
<img src="https://farm1.staticflickr.com/542/19839122619_c7fb67e012_c.jpg" class="lazy_image">
</p>

</body>
</html>
	<html>
	<head>
	<title>js - test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$(function() {
	var original_src = $("img.lazy_image").attr("src");

	$("img.lazy_image").attr("src", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAMAAABHPGVmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDY3IDc5LjE1Nzc0NywgMjAxNS8wMy8zMC0yMzo0MDo0MiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0E5NjM5MDMzQzI0MTFFNTkzOTVDNjBCNTAzMUFDNDQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0E5NjM5MDQzQzI0MTFFNTkzOTVDNjBCNTAzMUFDNDQiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpDQTk2MzkwMTNDMjQxMUU1OTM5NUM2MEI1MDMxQUM0NCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpDQTk2MzkwMjNDMjQxMUU1OTM5NUM2MEI1MDMxQUM0NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pt2aYJgAAAAGUExURfmTkgAAABYVhfEAAAAjSURBVHja7MGBAAAAAMOg+VNf4QBVAQAAAAAAAAAAAI8JMAAndAABi7SX2gAAAABJRU5ErkJggg==");

	var new_image = $(new Image());
	new_image.attr('src', original_src);
	new_image.bind('load', function(){
	console.log(this.width);
	console.log(this.height);
	$("img.lazy_image").attr('src', original_src);
	});
	});
	</script>
	</head>
	<body>

	<p>
	遅延読み込み<br>
	<img src="https://farm1.staticflickr.com/542/19839122619_c7fb67e012_c.jpg" class="lazy_image">
	</p>

	</body>
	</html>