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

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

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

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

Q&A

解決済

source読み込み完了時にクラスを追加できない

erp
erp

総合スコア46

JavaScript

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

2回答

0グッド

0クリップ

727閲覧

投稿2021/10/20 06:24

編集2021/10/20 10:09

前提・実現したいこと

loading="lazy" に対応しているブラウザで、source を読み込んだときに fadeInというclassを追加したいです。

発生している問題・エラーメッセージ

エラーはなく、画像も問題なく表示されますが、sourceタグにclassが付与されません。imgタグには付与されます。

該当のソースコード

js

1/* images lazy ----------------------------------------------- */ 2 if ("loading" in HTMLImageElement.prototype) { 3 let images = document.querySelectorAll('img[loading="lazy"]'); 4 let sources = document.querySelectorAll("source[data-srcset]"); 5 sources.forEach(function (source) { 6 source.addEventListener('load', function () { 7 source.classList.add('fadeIn'); // これが付与されない 8 }); 9 source.srcset = source.dataset.srcset; 10 }); 11 images.forEach(function (img) { 12 img.addEventListener('load', function () { 13 img.classList.add('fadeIn'); // こちらは付与される 14 }); 15 img.src = img.dataset.src; 16 }); 17 } else { 18 let script = document.createElement("script"); 19 script.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js"; 20 script.async = true; 21 document.body.appendChild(script); 22 let script_02 = document.createElement("script"); 23 script_02.src = "https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/plugins/object-fit/ls.object-fit.min.jss"; 24 script_02.async = true; 25 document.body.appendChild(script_02); 26 } 27 /* images lazy ------------------------------------------- end */

html

1<picture> 2 <source type="image/webp" srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-srcset="image.webp" style="width: 190px; height: auto"> 3 <img alt="nav image" class="lazyload" loading="lazy" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="image.png" width="640" height="640" style="width: 190px; height: auto;"> 4</picture>

CSS

1.lazyloading, img[loading="lazy"], source[data-srcset] { 2 visibility: hidden; 3 opacity: 0; 4} 5 6.lazyloaded, img[loading="lazy"].fadeIn, source[data-srcset].fadeIn { 7 visibility: visible; 8 opacity: 1; 9 transition: opacity 1s, transform 2.5s; 10}

試したこと

imgの方をコメントアウトして、sourceの挙動を見たところ、classが付与されていませんでした。
検索で onload 時の sourceタグの挙動を調べたのですが、調べ方が悪いのか、見つけることが出来ませんでした。
どなたか、どうしてクラスが付与されないのかご存じないでしょうか。

js

1sources.forEach(function (source) { 2 source.closest('picture').addEventListener('load', function () { 3 source.classList.add('fadeIn'); 4 }); 5 source.srcset = source.dataset.srcset; 6 });

と、親のpictureにイベントを登録しても、クラスはつきませんでした。
onload のイベントを他に起こさないといけないのでしょうか。

js

1sources.forEach(function (source) { 2 source.closest('picture').querySelector('img[loading="lazy"]').addEventListener('load', function () { 3 source.classList.add('fadeIn'); 4 }); 5 source.srcset = source.dataset.srcset; 6 });

としたところ、sourceにfadeInクラスがつきました。
imgがロードされたら......という方法でしかイベントは起きないのかもしれません。


追記です。

Webpに対応している Safariで確認したところ、Webp画像(source)が表示されませんでした。CSSで元の画像は非表示に、画像がロードされたらゆっくりと読み込むCSS装飾をしているのですが、非表示のままでした。SafariなどWebpに対応しているブラウザでは、そもそも兄弟要素のimgを読み込まないのかもしれません。
これを回避する方法(ほかにイベントを起こす方法)はありますでしょうか。

(補足:サーバー上にコードがきちんと上がっているか、Firefoxで確認したところ、画像は表示されていました。キャッシュも削除しています。)

補足情報(FW/ツールのバージョンなど)

Firefox 最新版, Safari 604.1

気になる質問をクリップする

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

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

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

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

0

自己解決

js

1sources.forEach(function (source) { 2 source.closest('picture').querySelector('img[loading="lazy"]').addEventListener('load', function () { 3 source.classList.add('fadeIn'); 4 }); 5 source.srcset = source.dataset.srcset; 6 });

css

1.lazyloaded, img[loading="lazy"].fadeIn, source[data-srcset].fadeIn { 2 visibility: visible !important; 3 opacity: 1 !important; 4 transition: opacity 1s, transform 2.5s; 5}

としたところ、無事Safariでも画像が表示されました。CSSの優先順位が原因だったようです。

投稿2021/10/20 12:16

erp

総合スコア46

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

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

このような回答には修正を依頼しましょう。

0

MDNやHTML規格を見てもたしかにはっきりしないのですが、おそらく <source>は単なるデータなのでいかなるイベントも発生せず、親の <picture> でイベントリスナを登録する必要があるのだと思います。


追記:
<picture>でもイベントは起きないようです。最後の兄弟の<img>でのみ loadイベントが発生しました。

投稿2021/10/20 06:33

編集2021/10/20 07:13
int32_t

総合スコア17847

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

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

このような回答には修正を依頼しましょう。

回答へのコメント

erp

2021/10/20 07:09

回答ありがとうございます。 親のpicutureにイベントを起こす方法を試してみました(追記部分)。しかしsourceにクラスは付与されませんでした。何か別の問題があるのかもしれません。
int32_t

2021/10/20 07:14

picutureでも起きないですね。確認しました。 どうも飽くまで画像をロードするのは img というルールのようです。
erp

2021/10/20 07:22

ありがとうございます。 兄弟要素のimgがロードされたら......という方法で書いたところ、無事イベントが起きました。スマホで無事クラス付きの画像が表示されるか確認してきますので、少々お待ちください。
erp

2021/10/20 07:45

webpに対応しているスマホで確認したところ、webp(source)画像が読み込まれていませんでした(追記部分)。兄弟要素にイベントを起こす方法だと、webpに対応しているブラウザだとそもそもimgの方をロードしないのかもしれません。
erp

2021/10/20 12:17

追記した方法で無事実装できました。 回答をくださったお蔭さまです。ありがとうございました。

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

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

JavaScript

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