今回はローディング中の画像表示をやって見ます。
プラグインもありますが・・・、プラグインを使用するまでも無い場合用です。
今の所は画像の読込中にローディング画像を表示をすることがメインですね。
<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>
1.ボタンを押すと、表示画像の読込と、ローディング画像の表示状態にする。
2.表示画像の読込が完了と同時にローディング画像を非表示状態にする。
まぁ、今回はサンプルなんで分かりやすくするため、表示画像の読込が完了してから、
setTimeout を使用してさらに5秒たってからローディング画像を非表示にしています。
そこはご了承ください。
jQuery はここからダウンロードしてください。