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

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

新規登録して質問してみよう
ただいま回答率
87.20%
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

解決済

画像を早く読み込みたい

scottie320
scottie320

総合スコア27

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

2回答

0評価

1クリップ

202閲覧

投稿2022/05/13 14:24

編集2022/05/16 20:57

前提

サイトアクセス時に画像および文字をjsで一瞬表示しているのですが、
画像の読み込みに時間が多くかかっており、フェードアウトの時間を長くせざるを得ない状態になっています。
1度サイトに訪問するとキャッシュが残るため、再度アクセスした際に画像がすぐに表示され、3秒が長く感じてしまいます。

実現したいこと

画像をすぐに表示し、フェードアウト時間を短くできる方法はありますでしょうか。
もしくは画像読み込みが終わってからフェードアウトできるように設定する方法はありますでしょうか。

該当のソースコード

php

<div class="first-img"> <p><img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/visual_bg.jpg" alt=""></p> <span> 美容専門のコンシェルジュが、<br> 提供する「最高の美」 </span> </div>

js

function firstimg() { $('.first-img p').fadeIn(50); $('.first-img span').fadeIn(500); } setTimeout(firstimg, 10); setTimeout(function () { $('.first-img').fadeOut(50); $('#main').fadeIn(50); }, 3000); //3秒後にロゴ含め真っ白背景をフェードアウト })(jQuery);

css

.first-img { background: #000; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9000; background-size: cover; } .first-img p { position: fixed; z-index: 9998; transform: translate(-50%, -50%); display: none; height: 100%; width: 100%; left: 50%; top: 50%; } .first-img span { font-family: "Noto Sans CJK JP Medium", sans-serif; font-size: 3.8rem; position: fixed; letter-spacing: 0.1em; color: #fff; text-align: center; z-index: 9999; display: none; justify-content: flex-end; bottom: 200px; width: 100%; }

試したこと

画像の容量を小さくしてみましたが、変わりませんでした。
また下記コードを試しましたが、firstimgを取得できず、logが出力されない状態です。

php

<div class="first-img" > <p><img src="<?php echo esc_url(get_template_directory_uri()); ?>/imgs/top/visual_bg.jpg" alt="r" id="firstimg"></p> <span> 美容専門のコンシェルジュが、<br> 提供する「最高の美」 </span> </div>

js

function firstimg(){ $('.first-img p').fadeIn(500); $('.first-img span').fadeIn(500); }; setTimeout(firstimg, 10); window.addEventListener('DOMContentLoaded', function(){ var img_elements = document.getElementById('firstimg'); for (var i = 0; i < img_elements.length; i++) { img_elements[i].addEventListener('load', (e) => { console.log(" load"); }); img_elements[i].src = img_elements[i].getAttribute("src"); } });

補足情報

visual_bg.jpg 751 × 1335 140KB

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。