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

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

ただいまの
回答率

90.50%

  • JavaScript

    20454questions

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

  • jQuery

    8172questions

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

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 4,196

ssmxgo

score 147

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以下30枚程度)を表示したサイトですが、画像に関しては内部的に画像APIを利用してページを出力してページを作りました。

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

普通に処理するだけなら

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要素の個数分発生するので
あまり意味が無いのではないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/21 22:28

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

    キャンセル

  • 2016/06/21 23:08

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

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

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

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

    キャンセル

  • 2016/06/21 23:18

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

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

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

    キャンセル

  • 2016/06/24 22:36

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

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

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

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

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

    キャンセル

  • 2016/06/25 01:54

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

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

    キャンセル

  • 2016/07/01 22:46

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

    ありがとうございました

    キャンセル

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

  • JavaScript

    20454questions

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

  • jQuery

    8172questions

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