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

Question

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

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

Например:

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

Глядя на Google Chrome Developer Tools, я вижу, что вызов логотипа выполнен, однако он остается "ожидающим" до тех пор, пока весь javascript на странице не будет загружен.

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

Answer 1

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

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

По данным этого сайта:

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

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

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

Здесь $.getScript ручной.

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>