私のウェブサイトwww.runthisday.comには、約ページをユーザーの画面の幅の50％にするJavaScriptがあり、他のコンポーネントを左に押して約ページのためのスペースを確保しています。JavaScriptの速度を向上させる
ユーザーがaboutボタンを初めてクリックすると、Chromeが画像の読み込みを待つため、JavaScriptが非常に遅いという問題があります。他のWebブラウザの場合、JavaScriptは速いですが、画像が読み込まれるまでに時間がかかります。ボタンを初めて使用した後、約スライドがうまく機能します。しかし、それは本当に重要なのは初めてです。
これを修正して、JavaScriptがすぐに動作し、ボタンをクリックした直後に画像が表示されるようにする方法はありますか？ページを読み込んでいるユーザーにこれを修正するよう指示しますか？もしそうなら、JavaScriptを使ってサイトをロードする方法を教えてください。
本当に助けていただきありがとうございます。
画像は巨大です。だから、それらのサイズをはるかに扱いやすいサイズにリサイズしてください。
ただし、イメージをプリロードすることもできます。ここでは、いくつかの画像を読み込んで準備が整ったことを知るための簡単なラッパーを紹介します。画像は常に同じである場合は、おそらくあなたが保存できる特定のセクション
Promise.all([
image('one.jpg'),
image('two.jpg'),
image('three.jpg')
]).then(images => console.log("all images loaded", images)
のためにロードされているあなたも、複数の画像を確実にするためにPromise.allラッパーを使用することができ
// Url -> Promise<ImageElement>
var image = function(src) {
return new Promise(function(pass, fail) {
var i = new Image()
i.src = src
i.onload = event=> pass(i)
})
}
var url = "http://www.runthisday.com/img/the_hammer.jpg"
image(url).then(elem => document.body.appendChild(elem))ウェブキャッシュ...永遠に...最初に待つために...
その他のオプションはbiをロードしませんg画像を使用すると、おそらくいくつかの場所で実際に必要なときにいくつかの繰り返しタイトルの画像を使用することができます...
画像を小さくする必要があります。あなたのハンマーイメージは5000x3333pxの解像度で、コンテンツ領域のサイズにして、保存するとPhotoshopやgimpの品質を約50％に設定します。現在、ファイルが現在のサイズの15〜20％である必要がある場合は、大量の画像データを取り込んでいます...ただ、Javascriptに問題はないことに注意してください。この問題は純粋にアセットベースのものです – Alex
aboutボックスが表示される前に低解像度の画像を最初に（そして非常に速く）読み込みます。おそらくオフスクリーンでさえも表示し、最初にそれを表示してから、完全な画像を読み込み、完了したら低解像度画像を置き換えます。とにかく - 5000x3333は非常に大きいですが、私はまた、ピクセル数を減らすことを提案します。答え[ここ]（http://stackoverflow.com/a/467943/4098951）が役立つかもしれません。 –
また、5000x3333の画像はモバイルユーザにとって非常に帯域幅を多く消費するため、ページの読み込みによって数MBのデータが必要になり、頻繁にロードされ、サイトが読み込まれないことがよくあります。 – Alex