Улучшение скорости JavaScript

Question

На моем веб-сайте www.runthisday.com есть JavaScript, который тянет около страницы до 50% ширины экрана пользователя, а нажатие других компонентов влево, чтобы освободить место для страницы.

Проблема заключается в том, что когда пользователь впервые нажимает кнопку about, этот JavaScript очень медленный, потому что Chrome ждет загрузки изображений. Для другого веб-браузера JavaScript выполняется быстро, но изображения занимают второе место для загрузки. После первого использования кнопки слайд отлично работает. Но это в первый раз действительно имеет значение.

Есть ли способ исправить это, чтобы JavaScript работал быстро, и изображения появляются сразу при нажатии кнопки? Направляли ли пользователи на страницу загрузки исправить это? Если да, можете ли вы направить меня куда-нибудь, что покажет мне, как я могу использовать JavaScript для загрузки сайта таким образом.

Я очень ценю помощь.

Answer 1

Ваши изображения огромный. Поэтому начните с изменения размера этих данных до более удобного размера.

Но еще одно, что вы можете сделать, это предварительно загрузить изображения. Вот простая оболочка, которую вы можете использовать для загрузки некоторых изображений и знать, когда они будут готовы.

// 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))

Вы можете даже использовать Promise.all обертку для обеспечения нескольких изображений загружены для конкретной секции

Promise.all([ 
    image('one.jpg'), 
    image('two.jpg'), 
    image('three.jpg') 
]).then(images => console.log("all images loaded", images) 

Answer 2

Если изображения всегда то же самое, вероятно, вы можете хранить в веб-кеш ... навсегда ... Чтобы просто подождать в первый раз ...

Другой вариант - не загружать bi g изображения, возможно, вы можете использовать некоторые повторяющиеся изображения под названием ... в некоторых местах и ​​действительно при необходимости загружать изображения ...