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

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

ただいまの
回答率

89.10%

Javascriptで特定のimg,JSファイルを読み込ませない方法を教えて下さい・。

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 3,437

akky-cha

score -6

ご質問お願い致します。

私が運営しているECサイトのページ上で複数のimg、JSファイルがページの表示速度を著しく遅くしているので、それらのファイルをロードさせないようにしたいと考えております。 
変更出来る領域が限られているので、それらの重いファイルを変更及び削除する事は出来ません。

そこでJavascriptは使用出来るので、それらの重いファイルをロードさせないようにする事は可能でしょうか?


目的 
ページの表示速度の高速化

環境 
・ECサイト(yahooショッピングなどのモールサイト) 
・css、Javascriptを使用可能
・サーバー側からの操作は不可。

重いファイルの中身 
・複数のimg 
・使用していないjQueryのプラグイン

既に行っている対処
・画像の遅延読み込み

わかりにくい内容ではございますが何卒、ご教授お願い致します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

+2

技術的な解決にならなくてすみませんが、
akky-chaさんの管理されている領域の外でロードに時間がかかっていることが問題なのであれば、
その責任範囲は管理者さんにあると思いますが。

一度管理者さんに相談されてはどうですか?
下手にJSで解決策を探しても、そもそもこのやりたいことはJSでやるべき話じゃないですし、
本来余計なJSになってしまいますよね。(そしてさらにロードに時間がかかる)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

checkベストアンサー

0

$(document).ready の時点ではまだ画像のロードは行われていませんので、一応、

$(function() {
  $("[対象の img タグ]").attr('src', "[差し替える画像 URL]");
});


で、画像を差し替えることが可能だと思います。これで固定の小さいサイズの画像に差し替えてしまうとか。

jQuery プラグインの方は <scrpit src="..." > でリンクしてあるならば同じやり方で差し替えるのは難しいと思います。
たとえば、

<script src="a.js" id="injs"></script>
<script>
  $('#injs').attr('src', 'b.js');
</script>


とやっても、読み込まれて評価されるのは a.js のほうかと思います(Chrome で確認)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/21 10:31

    unau 様
    ご返事ありがとうございます。
    さっそく上記の方法で試したいと思います。

    そこで1つ質問お願い致します。
    リンク先の差し替えだと、新しいリンク先にリクエストが発生します。
    ページの高速化が目的ですので、リクエストさせない方向で書き換える事は出来ないでしょうか?

    既に試した内容ですが,
    JQuery
    $().remove()で、対象の要素を削除してみたのですがリクエストは発生しているみたいです。
    (Chromeで確認)

    【備考】
    私が管理出来るJSファイルはドキュメントの上部にあり、消したいimg要素,
    JSファイルはそれより下にあります。

    わかりにくい内容ではございますが何卒、ご教授お願い致します。

    キャンセル

  • 2016/03/21 17:29

    まず、リンクの差し替えのリクエストについて。読み込ませたくない画像ファイルが複数あるという認識です。ですので、これらの img タグの src を、容量の小さい同一の画像ファイルの URL にすればよい、と考えました。同一の URL であればリクエストは一回しか発生しません(ブラウザ側でキャッシュするので)。また、akky-cha さんの管理する EC サイトとは別の場所にある画像を指定できれば、さらにロード時間の短縮になるかと思います。

    あと、.remove() で対象の要素を消されたとのことですが、消したタイミングはいつでしょうか。$(document).ready ですか。

    キャンセル

0

jQueryのプラグインでLazy Loadというものがあります。
画像の遅延読み込みです。

https://syncer.jp/how-to-setting-lazy-load-images

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2016/03/21 09:18

    あ、遅延読み込みは実装済みなんですね。失礼しました。

    キャンセル

  • 2016/03/21 09:19

    javascriptが複数のファイルに分かれているのなら、gulpなどで1ファイルにまとめてはどうでしょうか。

    キャンセル

  • 2016/03/21 10:19

    sekitaka_1214 様
    ご返事ありがとうございます。
    使用されていないJSファイルは私が管理している物ではないので統合及び、内容変更出来ません。

    キャンセル

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

  • ただいまの回答率 89.10%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる