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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

6809閲覧

src属性をdata-srcに変更したい(画像の遅延読み込み)

dea

総合スコア18

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

1クリップ

投稿2019/04/03 02:35

編集2019/04/03 05:23

lazysizesという画像の遅延読み込みのライブラリを使用して、画像の遅延読み込みを実現したいと考えています。

lazysizesの使い方としては、
・画像にlazyloadというクラスを付与する。
・画像のsrc属性をdata-srcに変更する
というものです。

現在、ECサイトを運営しているのですが、直接ソースを触れる箇所については、lazyloadというクラスを付与し、
data-srcを追加し遅延読み込みさせることはできております。

しかし、利用している外部のシステムが自動で出力する画像については、直接属性やclassを付与したりができません。

classに関しては、

$(img).addClass('lazyload');

のようなかたちで付与はできたのですが、srcの変更方法がわかりません。

ご教示いただければ幸いです。
よろしくお願いいたします。

//追記
システムが出力する画像は、サーバー内に保存(ftpもしくは管理画面から保存)した画像を、
使用しています。

使用方法としては、ECサイトのシステムの管理画面から

Aという商品のイメージ画像として、A.jpgを登録する。
(登録の際は、src="「」"の「」の中しか触ることはできません)

するとサイトに表示されるランキングなどに、その商品と結びついた画像が表示されるというかたちです。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ikedas

2019/04/03 04:31

「外部のシステムが自動で出力する画像」は別のサイトにあると思うのですが、どうやってECサイトの方で利用できるようにしているのでしょうか (質問文に追記ください)。
dea

2019/04/03 05:24

回答ありがとうございます! 追記いたしました。
CHERRY

2019/04/03 06:30

ECサイトがなにかわからないとできるかどうか不明と思います。 具体的な名称を出せない場合は、ECサイトのサポートに問い合わせるのが良いのではないでしょうか。
guest

回答3

0

srcの変更方法がわかりません。

どうしようもない可能性もあります。HTMLに<img src="...">と書かれている以上、JavaScriptが読まれた段階ですでにロードが始まっている場合もありえます。そうなれば、後から切り替えても遅延ロードとしての意味をなしません。

投稿2019/04/03 02:46

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dea

2019/04/03 03:59

回答ありがとうございます! 読み込まれる前に切り替えるということは不可能でしょうか?
guest

0

jQuery

1$(function() { 2 $('img[src]').each(function(index, element) { 3 if (!element.complete) { 4 var img = $(element); 5 img.attr('data-src', img.attr('src')).removeAttr('src').addClass('lazyload'); 6 } 7 }); 8});

投稿2019/04/03 07:23

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dea

2019/04/04 02:38

ご回答いただきありがとうございました!
guest

0

ベストアンサー

jQueryを読み込んでからだと、画像のsrc属性により、ロードが走ってしまう可能性が非常に高いので、ネイティブのJavaScriptをつかう必要があるかと思います。
下記JavaScriptを、head要素に記述しましょう。

javascript

1document.addEventListener('DOMContentLoaded', function(){ 2 // DOMツリーが読み込まれた時点で実行 3 // 画像要素を取得 4 const imagesDom = document.querySelectorAll('img'); 5 [].forEach.call(imagesDom, function(dom){ 6 // クラスにlazyloadが無い画像(外部からの画像)にのみ処理を実行 7 if (!dom.classList.contains('lazyload')) { 8 // 画像要素一個一個に対して処理 9 // data-srcにsrcを逃す 10 dom.dataset.src = dom.src; 11 // srcを空に 12 dom.src = ''; 13 // lazyloadクラスを付与 14 dom.classList.add('lazyload'); 15 } 16 }); 17 18});

正直、headにjs記述するのはあまりよろしくないですが(レンダリングブロックリソースとなる)、
画像読み込みが走る前にやるには、headに記述しないと、画像が読み込まれる前に間に合わない可能性があります。

ですが、これでやっても、DOMツリーを読み込んでからの実行のため、どうしても読み込まれてしまう画像もあるかもしれませんのであしからず。

投稿2019/04/03 07:07

miyabi_takatsuk

総合スコア9528

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

dea

2019/04/03 07:10

ありがとうございます! 早速試してみます!!
dea

2019/04/04 02:38

ありがとうございます!実現できました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問