仮出力されたimgに画像をdata-srcに当たられた値を挿入し遅延読込させたい

Question

JQuery javascript 素人ですm(_ _)m

###仮出力されたimgに画像をdata-srcに当たられた値を挿入し遅延（…というか、非同期）読込させたい

<div class="showcase">
 <img data-src="/abc.jpg">
 <img data-src="/def.jpg">
 <img data-src="/ghi.jpg">
</div>
<div class="showcase">
 <img data-src="/jkl.jpg">
 <img data-src="/mno.jpg">
 <img data-src="/pqr.jpg">
</div>
<script>
$(ここをチョメチョメ…);
</script>

⇓ 遅延？（というか非同期）ロードで attr="src='ここにelement.getAttribute('data-src')を挿入'"

<div class="showcase">
 <img data-src="/abc.jpg" src="/abc.jpg">
 <img data-src="/def.jpg" src="/def.jpg">
 <img data-src="/ghi.jpg" src="/ghi.jpg">
</div>
<div class="showcase">
 <img data-src="/jkl.jpg" src="/jkl.jpg">
 <img data-src="/mno.jpg" src="/mno.jpg">
 <img data-src="/pqr.jpg" src="/pqr.jpg">
</div>
<script>
$(ここをチョメチョメ…);
</script>

このような結果を得たく考えています。

js,JQともに知識が及ばず手が出ません。出来ればpluginなしで実現したいのですが
コード量が増えそうでしたら、適切にプラグインの仕様を提案くださると幸いです。

PHPによるなんとなくのコードを書いてみました。
が、PHPの突っ込みは無しで（笑）。それ自体では成り立たないことは知ってます。
やりたいロジックのイメージ化としてご参考ください。

foreach($shocases as $showcase){
 foreach($shocase as $img){
  $img['src']=$img['data-src'];
 }
}
return $showcases;

###経緯(おまけ、読まなくてOKです)
このコードに頼らざるを得なくなったのは色々事情がありまして…。
単純なサムネイル画像一覧(100px以下３０枚程度)を表示したサイトですが、画像に関しては内部的に画像APIを利用してページを出力してページを作りました。

どのブラウザでも特に問題なく表示できるのですが、MAC＋特定アンチウィルスソフト(sophos)を利用すると、imgにURL(画像API)を指定することがボトルネックになり、サイトの異常な遅延が発生します。（以前はAvastで発生していましたが今は解消）

コレに対する暫定対処としてテストを試みるため、コードを書こうと思ったのですが…
書こうと思ったのですが…、

自分にはそれを書き上げるスキルがありませんでしたm(_ _)mガクッ

Answer 1

普通に処理するだけなら

var element = //elementをimg要素（querySelectorAll()などで取得すればよいのではないでしょうか）として
var length = element.length;

// setTimeoutなどを使って、window.onload後から遅らせるなどして以下を処理
for(var i = 0; i < length ; i++){
  var originSrc = element[i].getAttribute('data-src');
  element[i].setAttribute('src',originSrc);
}

※jQueryを使うなら
・getAttribute()の箇所を.data('src')
・setAttribute()の箇所を.attr('src',originSrc)

みたいにやればできると思いますが、非同期読み込みを「何きっかけで発火させるか」によってコード量は大きく変わります。
よくあるLazyLoadのようなかたちにしたい（スクロールして、対象の画像が表示領域に入ると遅延読み込みを行う）ということであれば、コード量が爆発的に増えるので、素直にプラグインを使われることをおすすめいたします。

・jQuery Lazy Load Plugin
http://www.appelsiini.net/projects/lazyload

・Echo.js
https://toddmotto.com/echo-js-simple-javascript-image-lazy-loading/

---

あと、細かいところですが、htmlの箇所は

<div class="showcase">
 <img data-src="abc.jpg" src="placeholder.jpg">
 <img data-src="def.jpg" src="placeholder.jpg">
 <img data-src="ghi.jpg" src="placeholder.jpg">
</div>
<div class="showcase">
 <img data-src="jkl.jpg" src="placeholder.jpg">
 <img data-src="mno.jpg" src="placeholder.jpg">
 <img data-src="pqr.jpg" src="placeholder.jpg">
</div>

のように、img要素の初期のsrc属性を何らかのプレースホルダー的画像にしておかないと、
結局ページロード時にhttpリクエストがimg要素の個数分発生するので
あまり意味が無いのではないでしょうか。

Comments

[ssmxgo]

wow!!! ありがとうございます。早速試してみたいと思います。
プレースホルダーに関しては知りませんでした。ソースを指定しないことで早くなると思っていました。重ねてありがとうございます。

[manabufukai]

ああ、一番最初のコードブロックにsrc属性が省かれたものが書かれていたのですね…。見落としていました。

ただし、その用法は誤った記述方法です。
img要素の仕様として「src属性は必須」です。
https://momdo.github.io/html5/embedded-content-0.html#attr-img-src
抜粋
> src属性は存在しなければならず、画像リソースは潜在的にページ化もスクリプト化もされていない、任意でアニメーションである、非対話型を参照する潜在的にスペースで囲まれた妥当な空でないURLを含めなければならない。

ブラウザはおそらく解釈してくれはしますが、それに甘えないことが大切と思います。

また、
「アンチウイルスソフトがimg要素のスキャンを完了するまで画像が表示されない」といったような処理を行っているのであれば、回答に記載したコードを使ってもまるで効果が無いと思います。
その処理を断続的にするようにしなければ（たとえば表示エリアに入るまでsrc属性を置き換え無い等）結局はただスキャンのタイミングがsetTimeout等で指定した時間分後ろにズレるだけです。
そういったところもあり、プラグインを使うほうがすぐに実装->検証もでき、検証後あまり効果が無いようならすぐ外せるためおすすめしている次第です。

[ssmxgo]

ありがとうございます。特に画像の遅延の部分は、実は一画面に収まるものだったりします。なので普通に考えても、chromeとアンチウィルスソフトと画像APIの相性が悪いと思ってますが、なんとかせにゃならん、ッて感じです。
で、画像の遅延のためHTMLの表示がかたまりCSSもバグるなど通常では理解できないことが発生していますが、とにかく画像絡みであることまでは特定してます。
それで暫定対処法を探していましたが、一度プレースホルダーとして表示させることで、非同期（になるのかなぁ）的に後からでも置き換えることが出来る処理を探してました。

querySelectorAllはわかるかなぁ(；´Д｀)
明日になりますが、JQueryに置き換えてしまうかもしれませんがやってみて改めてご報告します。

本当にご丁寧にありがとうございます

[ssmxgo]

はうううう、申し訳ありません。
すっかりお返事忘れてました。

それでご提示の通りの方法でのやりたかったことが実現できました！

ありがとうございました。

結局、それでは問題解決に至りませんでしたが、全然違うところに速度低下(コードのバッティング)があったようです。

ただ、かねてから関心のあった内容でしたので勉強になりました。ありがとうございました！

[manabufukai]

とんでもないです、無事解決されたようで何よりです。
> 全然違うところに速度低下(コードのバッティング)があったようです。
よくあることです。笑
ただ、「これが原因かな？それともこれかな？」といったように色々な仮説を検証していくことで、エラーやバグの本当の原因を突き止める力も付いてくる＋正確に判断できるようになっていくと思いますので、どんどんトライ＆エラーを繰り返していってください。

また、今回のコードは思い切り簡略化させたものなので、是非プラグインの中のコードも目を通して、「どうしてこんな処理を挟む（必要なのか）のか？」といった部分も是非検証してみてください。これも非常に勉強になります。

[ssmxgo]

おおお、すみません。今気が付きました。
ご丁寧にありがとうございます。なかなか自分のコードに自信をもてませんが、プラグインのコードを読んでいくのは勉強になりそうです

ありがとうございました