Блог

Я ссылаюсь на объекты (изображения, скрипты, фреймы и т. Д.) С других веб-сайтов. Иногда другой сайт не работает, и мне приходится ждать около 30 секунд, пока мой браузер «пропустит» объект. Как я могу «пропустить» объект, например, через 5 секунд?

Вот несколько примеров кода:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"></script>')</script>
 

Проверьте yepnope. Вот фрагмент прямо с его домашней страницы:

yepnope.js имеет возможность выполнять резервные копии ресурсов и по-прежнему загружать зависимые скрипты параллельно с первым. Более четко:

 yepnope([{
  load: 'http:/­/ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js',
  complete: function () {
    if (!window.jQuery) {
      yepnope('local/jquery.min.js');
    }
  }
}, {
  load: 'jquery.plugin.js',
  complete: function () {
    jQuery(function () {
      jQuery('div').plugin();
    });
  }
}]);
 

Я предлагаю изучить yepnope и другие существующие загрузчики скриптов, прежде чем решать, использовать ли свой собственный. Эти загрузчики довольно малы (yepnope утверждает, что они составляют 1,6 КБ), поэтому вы не получите много пользы, написав собственное решение.

В HTML5 есть async атрибут для script элементов, который компенсирует эту трудность, позволяя сценариям загружаться асинхронно. Некоторые браузеры дополнительно реализуют нестандартный defer атрибут, который похож, но не совсем такой же. Что касается других ресурсов scripts , таких как изображения, вы можете фактически использовать JavaScript, чтобы заставить их загружаться асинхронно (например, создавая элемент изображения «на лету»). Недостатком этого подхода является то, что если ваш асинхронный JavaScript впоследствии вызывает загрузку асинхронных изображений, вы подвергаетесь очень высокому риску FOUC.