JQuery javascript 素人ですm(_ _)m
###仮出力されたimgに画像をdata-srcに当たられた値を挿入し遅延(…というか、非同期)読込させたい
html
1<div class="showcase"> 2 <img data-src="/abc.jpg"> 3 <img data-src="/def.jpg"> 4 <img data-src="/ghi.jpg"> 5</div> 6<div class="showcase"> 7 <img data-src="/jkl.jpg"> 8 <img data-src="/mno.jpg"> 9 <img data-src="/pqr.jpg"> 10</div> 11<script> 12$(ここをチョメチョメ…); 13</script>
⇓ 遅延?(というか非同期)ロードで attr="src='ここにelement.getAttribute('data-src')を挿入'"
html
1<div class="showcase"> 2 <img data-src="/abc.jpg" src="/abc.jpg"> 3 <img data-src="/def.jpg" src="/def.jpg"> 4 <img data-src="/ghi.jpg" src="/ghi.jpg"> 5</div> 6<div class="showcase"> 7 <img data-src="/jkl.jpg" src="/jkl.jpg"> 8 <img data-src="/mno.jpg" src="/mno.jpg"> 9 <img data-src="/pqr.jpg" src="/pqr.jpg"> 10</div> 11<script> 12$(ここをチョメチョメ…); 13</script>
このような結果を得たく考えています。
js,JQともに知識が及ばず手が出ません。出来ればpluginなしで実現したいのですが
コード量が増えそうでしたら、適切にプラグインの仕様を提案くださると幸いです。
PHPによるなんとなくのコードを書いてみました。
が、PHPの突っ込みは無しで(笑)。それ自体では成り立たないことは知ってます。
やりたいロジックのイメージ化としてご参考ください。
php
1foreach($shocases as $showcase){ 2 foreach($shocase as $img){ 3 $img['src']=$img['data-src']; 4 } 5} 6return $showcases;
###経緯(おまけ、読まなくてOKです)
このコードに頼らざるを得なくなったのは色々事情がありまして…。
単純なサムネイル画像一覧(100px以下30枚程度)を表示したサイトですが、画像に関しては内部的に画像APIを利用してページを出力してページを作りました。
どのブラウザでも特に問題なく表示できるのですが、MAC+特定アンチウィルスソフト(sophos)を利用すると、imgにURL(画像API)を指定することがボトルネックになり、サイトの異常な遅延が発生します。(以前はAvastで発生していましたが今は解消)
コレに対する暫定対処としてテストを試みるため、コードを書こうと思ったのですが…
書こうと思ったのですが…、
自分にはそれを書き上げるスキルがありませんでしたm(_ _)mガクッ

回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2016/06/21 13:28
2016/06/21 14:08
2016/06/21 14:18
2016/06/24 13:36
2016/06/24 16:54
2016/07/01 13:46