質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.84%

  • JavaScript

    14797questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1005questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Ajaxで画像が完全に読み込まれてから表示させるには?

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 185

balls

score 10

jQueryベースのAjaxを使って、自作の画像スライダーを制作しました。
.doneや.completeの後に画像を表示するようにfadeInを入れたのですが、画像がまだ完全に読み込まれる前に表示してしまうのであまりきれいではありません。(ローディングGIF画像は入れています)

そこで初回のアクセス時のみ5秒待ってから表示させる方法にし、思い通りの結果は得られたのですがあまりスマートとは言えないです。

画像が完全に読み込まれたら、fadeInを実行するにはどうしたらいいでしょうか?

function ajaxAction() {
        var loadFile = $('#switch-mode dd a.active').attr('href');
        var url = location.href;
        $.ajax({
            type: 'GET',
            url: loadFile,
            dataType: 'html'
        }).done(function(data){
            $('#slider').append(data);
            sliderMotion();
        }).complete(function(){
            // If first time to visit the page.
            if (isFirstVisit) {
                setTimeout(function(){ 
                    $('#loading').remove();
                    $('#main-cont').fadeIn(1000);
                 }, 5000);
                 isFirstVisit = false;
            } else {
                $('#loading').remove();
                $('#main-cont').fadeIn(1000);
            }

        });
    }
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • karamarimo

    2017/12/30 16:26

    ajax で取得した html の中に画像が含まれているということでしょうか?

    キャンセル

  • balls

    2017/12/31 15:07

    はい、そうです。読み込み先のHTMLに画像が含まれていて、ローディング画像が消えると、画像がフェードインするようにしたいのですが、現状は、ローディング画像が消えて画像が徐々に表示されてしまいます。

    キャンセル

  • karamarimo

    2017/12/31 15:23

    でしたら私の回答をご覧ください。

    キャンセル

回答 2

+1

画像の読み込みが完了するとloadイベントが発生するので、その時にfadeInすればいいのではないでしょうか。

demo(JSFiddle)

 追記

今の場合こうすればいいのではないでしょうか。

        $.ajax({ ... }).done((data) => {
            const $img = $(data);
            $('#slider').append($img);
            sliderMotion();
            $img.on('load', () => {
                $('#loading').remove();
                $('#main-cont').fadeIn(1000);
            });
        })

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/31 16:32

    この load は、$.ajax の中だと使えないんでしょうか?
    .done、.complete の後に入れてみたのですが動作しませんでした。
    希望としては、$.ajaxで使えるものがほしいです。

    キャンセル

  • 2017/12/31 19:47

    追記しました。

    キャンセル

check解決した方法

0

karamarimoさんからいただいたコードで作成してみたのですが、コンソール上でエラーはでないものの、

$img.on('load', () => {
                $('#loading').remove();
                $('#main-cont').fadeIn(1000);
            });


が発動しませんでした。検証ブラウザは最新版のFirefoxです。

http://cly7796.net/wp/javascript/implement-the-loading-of-percent-display/
こちらのサイトに掲載されていたコードを参考にしたところうまくいきました。

実行内容としては、
1、読み込み先のHTML内の画像(<img>)を調べ
2、それを一つ一つ読み込み
3、読み込みを完了してからfadeInを実行

var loadFile = $('#switch-mode dd a.active').attr('href');

        $.ajax({
            type: 'GET',
            url: loadFile,
            dataType: 'html'
          }).done(function (data) {
              const $html = $(data);
              const $img = $('img', $html);
              const imgNum = $img.length;
              let count = 0;
              let current;

              console.log($img[0]);
              console.log(imgNum);

              for (var i = 0; i < imgNum; i++) {
                const createImg = new Image(); // 画像の作成
                // 画像読み込み完了したとき
                createImg.onload = function () {
                  count += 1;
                }
                // 画像読み込み失敗したとき
                createImg.onerror = function () {
                  count += 1;
                }
                createImg.src = $img[i].src; // 画像にsrcを指定して読み込み開始
                console.log(count);
              }

              // ローディング処理
              var nowLoading = setInterval(function () {
                // 現在の読み込み具合のパーセントを取得
                current = Math.floor(count / imgNum * 100);
                // パーセント表示の書き換え
                console.log(current)


                // 全て読み込んだ時
                if (count == imgNum) {
                  // ローディングの終了
                  clearInterval(nowLoading);
                  console.log('done.');
                  $('#slider').append($html);
                  $html.ready(function () {
                    $('#loading').remove();
                    $('#main-cont').fadeIn(1000);
                  });
                  sliderMotion();
                }
              }, 100);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.84%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    14797questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • Ajax

    1005questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。