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

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

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

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

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

classに関しては、

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

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

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

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

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

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

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

ikedas

2019/04/03 04:31

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

dea

2019/04/03 05:24

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

CHERRY

2019/04/03 06:30

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

行動規範の内容に同意します

回答3件

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

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

投稿2019/04/03 02:46

maisumakun

総合スコア146175

dea

2019/04/03 03:59

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

行動規範の内容に同意します

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

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

行動規範の内容に同意します

ベストアンサー

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});