web-dev-qa-db-ja.com

画像を読み込んだ後にフェードインする

私はこのコードが望ましい効果を達成するのを見つけ、JSFiddleで試してみました

http://jsfiddle.net/AndyMP/7F9tY/366/

読み込まれた後、画像がフェードインするように機能するようです。次に、Webページで試してみましたが、同じように機能しませんでした。フェードインするのではなく、最初にイメージをロードしました。ロードと同時にフェードインしているように見えた場合もあります。

これを達成するためのより信頼できる方法はありますか？できればこのコードを修正することによってできますか？

$("#image").ready(function(){ $("#preload").fadeIn(1000); });

jqueryimageload
12
Andy

実際のHTMLマークアップにある画像をfadeIn()に信頼できる唯一の方法は、次のようにHTMLマークアップにonloadハンドラーを設定することです。

<div id="image">
    <img id="preload" onload="fadeIn(this)" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

<script>
// this function must be defined in the global scope
window.fadeIn = function(obj) {
    $(obj).fadeIn(1000);
}
</script>

ここで作業デモ： http://jsfiddle.net/jfriend00/X82zY/

そうすることで、各画像にIDやクラスを与える必要がなくなります。マークアップでスタイルとイベントハンドラーを設定するだけです。

マークアップにイベントハンドラーを配置する必要があるのは、ページのJavaScriptが実行されるまで待機すると、遅すぎる場合があるためです。画像が既に読み込まれている可能性があり（特にブラウザのキャッシュにある場合）、そのためonloadイベントを見逃している可能性があります。ハンドラーをHTMLマークアップに配置すると、画像の読み込みが始まる前にハンドラーが割り当てられるため、onloadイベントを見逃すことはありません。

JavaScriptにイベントハンドラーを配置したくない場合は、次のようにして、実際のHTMLで画像のプレースホルダーを使用し、JavaScriptを使用して実際の画像タグを作成して挿入し、画像をプルすることができます。プレースホルダーからのURL：

<div>
    <span class="fadeIn" data-src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg"></span>
</div>

<script>
$(document).ready(function() {
    $(".fadeIn").each(function() {
        var src = $(this).data("src");
        if (src) {
            var img = new Image();
            img.style.display = "none";
            img.onload = function() {
                $(this).fadeIn(1000);
            };
            $(this).append(img);            
            img.src = src;
        }
    });
});
</script>

作業デモ： http://jsfiddle.net/jfriend00/BNFqM/

最初のオプションでは画像の読み込みが少し速くなります（画像の読み込みはページ解析の直後に開始されるため）が、2番目のオプションではプロセスをよりプログラムで制御できます。

38
jfriend00

Pure JavaスクリプトとCSSソリューション：

Opactiyで遷移効果を使用します。

let images = document.getElementsByTagName("img");
for (let image of images) {
  image.addEventListener("load", fadeImg);
  image.style.opacity = "0";
}

function fadeImg() {
  this.style.transition = "opacity 2s";
  this.style.opacity = "1";
}
<img src="http://lorempixel.com/400/200/">
<img src="http://lorempixel.com/g/400/200/">
<img src="http://lorempixel.com/400/200/sports/">
5
Robbendebiene

この質問を見つけて、angular.jsを使用する人にとっては興味深いかもしれません。

私は非常にうまく機能する小さなディレクティブを書きました。

JS：

.directive('imgFadeInOnload', function () {
    return {
      restrict: 'A',
      link: function postLink(scope, element, attr) {
        element.css('opacity', 0);
        element.css('-moz-transition', 'opacity 2s');
        element.css('-webkit-transition', 'opacity 2s');
        element.css('-o-transition', 'opacity 2s');
        element.css('transition', 'opacity 2s');
        element.bind("load", function () {
          element.css('opacity', 1);
        });
        element.attr('src', attr.imgFadeInOnload);
      }
    };
  });

HTML：

<img img-fade-in-onload="{{imgSrc}}" src="">

HTMLではなくディレクティブコードでsrcを設定することにより、jfriend00（onloadが呼び出された後にハンドラーがアタッチされる）によって言及された問題が解決されます。

4
Felix Engelmann

html

<div id="image">
    <img id="preload" src="http://farm8.staticflickr.com/7227/7007769551_3b5b1640ea_b.jpg" style="display:none;" />
</div>

javaScript

.ready（）は思い通りに起動しません。 'load' jQueryイベントハンドラを参照してください。

$("#preload").load(function(evt){
      $(this).fadeIn(1000);
});
4
DefyGravity

fadeInは、イメージが読み込まれた後に呼び出す必要があります。次に例を示します。 http://jsfiddle.net/mYYym/

1
stewe

@ jfriend00の回答に基づく、@ Robbendebieneのアプローチに類似したCSSトランジションおよびJavaScriptソリューションを次に示します。

  • jsがオフの場合に画像を表示するフォールバックを提供します
  • インラインJavaScriptの1ビットのみが必要ですonload="this.style.opacity=1"
  • すべてのアニメーションはCSSであり、jQueryや複雑なJavaScriptは必要ありません
img.fadein {
  opacity: 1;  /* fallback in case of no js */
  transition: opacity 500ms ease;
  max-width: 100%;
  height: auto;
}
.js img.fadein {
  opacity: 0; /* start with hidden image if we have js */
}
<!-- use moderinr to provide the "js" class on the html element -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<img class="fadein" onload="this.style.opacity=1" src="http://lorempixel.com/1500/1500/">
1
squarecandy