今回はローディング中の画像表示をやって見ます。
プラグインもありますが・・・、プラグインを使用するまでも無い場合用です。
今の所は画像の読込中にローディング画像を表示をすることがメインですね。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="./jquery-1.9.1.min_.js"></script>
<script type="text/javascript"><!--
function funcDispImage() {
$('#disp_area').addClass('loading');
var image = new Image();
var img_url = './image_jpeg.jpg'
image.src = img_url;
image.onload = function () {
setTimeout(function(){
$('#disp_img').attr('src', img_url);
$('#disp_area').removeClass('loading');
}, 5000);
}
}
--></script>
<link rel="stylesheet" href="reset.css" type="text/css">
<style type="text/css"><!--
#disp_area {
height : 350px;
width : 960px;
}
.loading {
background-image : url('./loading.gif');
background-repeat: no-repeat;
background-position: center center;
}
--></style>
</head>
<body>
<div id="disp_area"><img id="disp_img"></div>
<input type="button" onclick="funcDispImage();" value="Disp Image">
</body>
</html>
１．ボタンを押すと、表示画像の読込と、ローディング画像の表示状態にする。
２．表示画像の読込が完了と同時にローディング画像を非表示状態にする。
まぁ、今回はサンプルなんで分かりやすくするため、表示画像の読込が完了してから、
setTimeout を使用してさらに5秒たってからローディング画像を非表示にしています。
そこはご了承ください。
jQuery はここからダウンロードしてください。