lazy load処理で画像の読み込み完了後にクラスを付与したい

Question

こちら
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/?hl=ja
を参考にして、下記のようなlazy-load imageを作成しました（ほとんどそのまんまですが）。
elseの部分はpolyfillがあれば必要ないかもしれません。

[1]でsrcに格納される画像URLが入れ替えられます。
入れ替えられるまでは、loading.gifが表示されているので、画像（a.jpg,b.jpg...）が読み込み終わるまでは[1]は機能していないように見えます。
従って、[2][3]を含む、entries.forEach(function(entry) もしくは、if (entry.isIntersecting)のブロック全体が画像が読み込み終わってから動作するのかと思っていたら、実際に動作させてみると、[2][3]のクラスの付け外しは画面入った時点で画像の読み込みとは関係なく動作しているようで、画像が入れ替わる前に「lazy」クラスが外され「is-show」クラスが付いてしまいます。

このクラス変更の挙動も、画像の読み込みが終わったあと（画像入れ替えが終わったあと）にしたいのですが、その場合はどのようにすれば良いのでしょうか（どのように読み込み終わりを検出したら良いのでしょうか）。

HTML

<p><img src="img/loading.gif" data-src="img/a.jpg" alt="" class="lazy"></p>
<p><img src="img/loading.gif" data-src="img/b.jpg" alt="" class="lazy"></p>
<p><img src="img/loading.gif" data-src="img/c.jpg" alt="" class="lazy"></p>
<p><img src="img/loading.gif" data-src="img/d.jpg" alt="" class="lazy"></p>
<p><img src="img/loading.gif" data-src="img/e.jpg" alt="" class="lazy"></p>
<p><img src="img/loading.gif" data-src="img/f.jpg" alt="" class="lazy"></p>
<p><img src="img/loading.gif" data-src="img/g.jpg" alt="" class="lazy"></p>

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    if ("IntersectionObserver" in window) {
        var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    var lazyImage = entry.target;
                    if (lazyImage.dataset.hasOwnProperty('src')) {
                        lazyImage.src = lazyImage.dataset.src;      // [1]
                        lazyImage.dataset.src = '';
                    }
                    lazyImage.classList.remove("lazy");             // [2]
                    lazyImage.classList.add("is-show");             // [3]
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        lazyImages.forEach(function( image ) {
            image.src = image.dataset.src;
            image.classList.remove('lazy');
            image.classList.add("is-show");
        });
    }
});

何卒ご教示のほどよろしくお願い申し上げます。

Answer 1

lazyImageのloadイベントを待って付与するようにすればよいのではないでしょうか。

Comments

[cattail]

ご回答ありがとうございました。
ご助言をヒントに解決できました。

Answer 2

次のようにすることで解決できました。

lazyImage.onload = function() {
	lazyImage.classList.remove("lazy");             // [2]
	lazyImage.classList.add("is-show");             // [3]
}