JavaScript + Ajax 実践サンプル集 - イメージをロード中にアニメーションGIFを表示する

イメージをロード中にアニメーションGIFを表示する　《プログラマーがネットで副収入を得る方法とは》

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、大きなサイズのイメージをロードするときローディング中にアニメーションGIFを表示します。サンプルが表示されたら[Load Image！]ボタンをクリックしてイメージをロードします。イメージのロードが完了するまでアニメーションGIFが表示されます。

このサンプルを編集して試してみる

ここでは、[Load Image!]ボタンをクリックすると3秒間スリープしてからイメージをロードしています。本番では、このスリープの処理を削除してください。

$('#btnLoad').click(function() {
  // アニメーションGIFを表示する
  $('#loader').empty().addClass('loading').show();
  // 3秒間スリープする
  var t = setTimeout(loadImage, 3000);
});

// イメージをロードする
function loadImage() { 
  var img = new Image();
  $(img).load(function() {
    $(this).hide();
    $('#loader').removeClass('loading').append(this);
    $(this).fadeIn();
  })
  .error(function() {
    alert('error');
  })
  .attr('src', 'jQuery/imageLoading/images/jQueryUI.png');   
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery - image loading</title>
  <link href="jQuery/imageLoading/style.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function() {
      $('#btnLoad').click(function() {
        $('#loader').empty().addClass('loading').show();
        var t = setTimeout(loadImage, 3000);
      });
    });

CSS部HEAD部BODY部

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
div#loader
{
  border: 3px solid #ccc;
  width: 472px;
  height: 610px;
  display: none;
}

div#loader.loading
{
  background: url(images/spinner.gif) no-repeat center center;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/imageLoading/style.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function() {
    $('#btnLoad').click(function() {
      $('#loader').empty().addClass('loading').show();
      var t = setTimeout(loadImage, 3000);
    });
  });

  function loadImage() { 
    var img = new Image();
    $(img).load(function() {
      $(this).hide();
      $('#loader').removeClass('loading').append(this);
      $(this).fadeIn();
    })
    .error(function() {
      alert('error');
    })
    .attr('src', 'jQuery/imageLoading/images/jQueryUI.png');   
  }    
  
</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<button id="btnLoad">Load Image!</button>
<div id="loader"></div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージをロード中にアニメーションGIFを表示する　《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージをロード中にアニメーションGIFを表示する 《プログラマーがネットで副収入を得る方法とは》

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

イメージをロード中にアニメーションGIFを表示する　《プログラマーがネットで副収入を得る方法とは》