Каков наиболее эффективный способ предварительной загрузки изображений и таблиц стилей?

Я хочу иметь возможность предварительно загружать изображения, таблицы стилей и сценарии, если это возможно, чтобы ускорить время загрузки на моем сайте, в дополнение к тому, что пользователь не видит загрузку изображения прямо перед ними. Мне интересно, что это самый эффективный способ сделать это?Каков наиболее эффективный способ предварительной загрузки изображений и таблиц стилей?

Имеет ли смысл размещать код, который должен предварительно загружать изображения и таблицы стилей на каждой странице? Другими словами, я продублировал код предварительной загрузки.

Имеет ли значение размещение кода предварительной загрузки, верхней части страницы, внизу?

Любое понимание, несомненно, будет оценено по достоинству. Вот мой код:

<script type="text/javascript"> 
window.onload = function() { 
    setTimeout(function() { 
     // XHR to request a JS and a CSS 
     var xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/pages.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/slider.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/responsive.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/footer-home.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/footer-main.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/contact.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/3eblog.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/index.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/submit.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'submit.html'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'css/bootstrap.css'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'js/jquery.cslider.js'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'js/one.js'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'js/two.js'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'js/three.js'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'js/four.js'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'js/five.js'); 
     xhr.send(''); 
     xhr = new XMLHttpRequest(); 
     xhr.open('GET', 'js/modernizr.custom.28468.js'); 
     xhr.send(''); 
     // preload image 
     new Image().src = "images/3elements-issue-1-fall-2013.png"; 
     new Image().src = "images/3elements-issue-1-fall-2013-current.png"; 
     new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013.swf"; 
     new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013.pdf"; 
     new Image().src = "journal-issues/3elements-review-fall-journal-issue-1-2013-mobile.pdf"; 
     new Image().src = "images/mikaela.jpg"; 
     new Image().src = "images/carol.jpg"; 
     new Image().src = "images/parker.jpg"; 
     new Image().src = "images/kids.jpg"; 
     new Image().src = "images/kids2.jpg"; 
     new Image().src = "images/kids3.jpg"; 
     new Image().src = "images/kids4.jpg"; 
     new Image().src = "images/kids5.jpg"; 
     new Image().src = "images/kids6.jpg"; 
     new Image().src = "images/kids7.jpg"; 
     new Image().src = "images/kids8.jpg"; 
     new Image().src = "images/kids9.jpg"; 
     new Image().src = "images/alert.svg"; 
     new Image().src = "images/3elm.svg"; 
     new Image().src = "images/drop-down-selector.svg"; 
     new Image().src = "images/arrow-selector.svg"; 
     new Image().src = "images/book.svg"; 
     new Image().src = "images/facebook.svg"; 
     new Image().src = "images/light-bulb.svg"; 
     new Image().src = "images/logo.svg"; 
     new Image().src = "images/logo-2.svg"; 
     new Image().src = "images/logo-2-denied-page.png"; 
     new Image().src = "images/mug.svg"; 
     new Image().src = "images/notepad.svg"; 
     new Image().src = "images/stumble.svg"; 
     new Image().src = "images/twitter.svg"; 
     new Image().src = "images/google-plus.svg"; 
     new Image().src = "images/favi.ico"; 
     new Image().src = "fonts/gotham-light.ttf"; 
     new Image().src = "fonts/gotham-light.otf"; 
     new Image().src = "fonts/gotham-medium.ttf"; 
     new Image().src = "fonts/gotham-medium.otf"; 
     new Image().src = "fonts/gotham-book.ttf"; 
     new Image().src = "fonts/gotham-book.otf"; 
     new Image().src = "fonts/gotham-bold.ttf"; 
     new Image().src = "fonts/gotham-bold.ttf"; 
     new Image().src = "fonts/pts.ttf"; 
     new Image().src = "fonts/pts.otf"; 
     new Image().src = "fonts/pts.woff"; 
    }, 1000); 
}; 
</script>

источник

2013-12-03 Marlon Fowler

Помимо всего прочего, вы должны взглянуть на массивы и циклы: http://eloquentjavascript.net/chapter4.html , https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for. –

«.. in order to speed up load time throughout my site, in addition to not having a user see an image load right before them»

Эти требования противоречат. Пользователь видит загрузку изображения перед ним, потому что страница отображается до загрузки изображения.

Предварительная загрузка не ускоряет загрузку. Если вы предварительно загрузите все изображения перед началом просмотра страницы, начальное представление страницы будет медленнее. Предварительная загрузка особенно полезна для изображений, которые вы хотите отобразить позже, как (другое) фоновое изображение при наведении. Хотя спрайты обычно являются лучшим вариантом. Предварительная загрузка css мне кажется бесполезной.

Если вы хотите ускорить загрузку начальной страницы, используйте CDN. Вы даже можете создать несколько доменов или поддоменов на одном сервере. Это позволяет браузерам одновременно загружать больше файлов. У большинства браузеров есть ограничение, которое позволяет им одновременно загружать только 2 файла с одного и того же сервера. Установив несколько доменов или поддоменов, вы можете обмануть браузеры, думая, что существует несколько серверов. Конечно, ваш сервер должен быть достаточно мощным и иметь достаточную пропускную способность для поддержки дополнительных запросов, иначе это не поможет.

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

Если вы хотите, вы можете установить cookie, когда все изображения предварительно загружены, поэтому вы делаете это только один раз за сеанс.

Этот код лучше всего расположен в нижней части страницы. Это позволяет отображать страницу, в то время как этот скрипт по-прежнему работает, хотя это не имеет большого значения, поскольку он будет довольно быстрым (он устанавливает только таймер).

источник

2013-12-03 18:08:41 GolezTrol

Я не уверен, почему этот ответ был опущен! –

После этого я внес некоторые изменения. Возможно, downvoter был недоволен моим первоначальным ответом, который был слишком общим, не отвечая на вопрос напрямую. Во всяком случае, мой ответ обновлен, и, похоже, downvoter изменил свое мнение. Ура для системы голосования! ;) – GolezTrol

Как установить cookie при предварительной загрузке изображений? –

Я не вижу смысла делать это вообще. Браузеры файл OnLoad после события все нагрузили поэтому решение сделать что-то вроде

window.onload = function() {document.body.style.display = "block"};

Имея внутренний стиль для тела:

<body style="display:none"> ... </body>

источник

2013-12-03 18:07:49 spectre

Вы можете увидеть это, например, на этом сайте: http://galeryjka.net84.net/index.php – spectre

Необходимо в любом случае загрузить изображения. С «preload», я думаю, вы имеете в виду, что хотите их угасать только тогда, когда они загружаются.

Вы делаете это с наложением div над изображениями и исчезают при загрузке изображения.

$('img').on('load', function() { 
    $('yourImageHidingDiv').fadeOut(); 
});

источник

2013-12-03 18:11:33 loveNoHate

Лучшее заключается в использовании держателя изображений с небольшим GIF в качестве фона, как только изображения были загружены, просто удалите фон.

$(document).ready(function(){ 

$("#loading").hide() 
}

и #loading фоновое изображение должно быть что-то вроде этого: http://jimpunk.net/Loading/wp-content/uploads/loading1.gif

источник

2013-12-03 18:13:58 ProllyGeek

Каков наиболее эффективный способ предварительной загрузки изображений и таблиц стилей?

ответ

Смежные вопросы