Как загрузить изображение перед javascript

Question

В настоящее время я стараюсь улучшить восприятие веб-приложения, гарантируя, что логотип компании загружается впереди javascript.

Для этого я переместил ссылки на javascript ниже элемента img для логотипа компании.

Например:

<img src="/Images/Logo.jpg" alt="My Company"/> 
<script type="/Scripts/MyScripts.js"></script> 

При взгляде на Google Chrome Инструменты разработчика я могу видеть, что призыв к логотипу сделан, однако он остается в «ожидании», пока все Javascript на странице не была загружена.

Почему это происходит? Как я могу гарантировать, что логотип компании загружен перед javascript?

Answer 1

Попробуйте использовать для своих скриптов $(window).load, если вы используете jQuery.

$(window).load(function() { 
    //put js code here 
}); 

Согласно this site:

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

Что касается отдельных файлов, которые вы должны добавить на свой сайт, используя <script src='path/to/file'>, я рекомендую использовать $.getScript.

$.getScript("path/to/file"); 

Вот $.getScriptmanual.

Answer 2

Браузеру необходимо загрузить и выполнить JS-файлы, как только появится во время разбора разметки HTML (по крайней мере, из-за возможного использования document.write в скриптах).

Одним из лучших решений будет добавлять onload обработчик событий, который загружает скрипт динамически, когда страница готова:

<script type="text/javascript"> 
window.addEventListener("load",function() { 
    var elem = document.createElement("script"); 
    element.src = "file.js"; 
    document.body.appendChild(element); 
, false); 
</script>