Программная загрузка скриптов и таблиц стилей

Различные варианты программной загрузки файлов скриптов и таблиц стилей.

Загрузка нескольких CSS-файлов

(function(hrefs) {
   for (var i = hrefs.length - 1; i >= 0; i--) {
       var href = hrefs[i];
       if ($('link[href="' + href + '"]').length)
           continue;
        var style = document.createElement('link');
       style.setAttribute('type', 'text/css');
       style.setAttribute('rel', 'stylesheet');
       style.setAttribute('href', href);
       $('head')[0].appendChild(style);
   }
})(['../controls.css', '../common.css']);

Вместо кучи кода с использованием createElement можно было бы просто написать что-то вроде $('head').append('<link type="text/css" rel="stylesheet" href="' + href + '" />'), но данный код не будет работать в IE8. Тег со стилями будет добавлен на страницу, но стили не будут применены к элементам.

Загрузка нескольких файлов скриптов с ожиданием загрузки

Пример загрузки нескольких файлов скриптов с ожидаем окончания загрузки и в условиях, когда для файлов необходимо, чтобы кеширование было включено и jQuery не добавлял в адрес файла строку вида ?_=xxxxxxxxxx.

$.when(
   $.ajax({ url: '../myscript1.js', dataType: 'script', cache: true }),
   $.ajax({ url: '../myscript2.js', dataType: 'script', cache: true }),
   $.ajax({ url: '../myscript3.js', dataType: 'script', cache: true }),
   $.Deferred(function(deferred) {
       $(deferred.resolve);
   })
).done(function() {

    //place your code here, the scripts are all loaded

});

Тот же вариант, но с проверкой, не загружен ли уже код ранее (myscript1function, myscript2function, myscript3function — функции, объявленные в соответствующем файле скрипта).

$.when(
   typeof window.myscript1function == 'undefined' ? $.ajax({ url: '../myscript1.js', dataType: 'script', cache: true }) : null,
   typeof window.myscript2function == 'undefined' ? $.ajax({ url: '../myscript2.js', dataType: 'script', cache: true }) : null,
   typeof window.myscript3function == 'undefined' ? $.ajax({ url: '../myscript3.js', dataType: 'script', cache: true }) : null,
   $.Deferred(function(deferred) {
       $(deferred.resolve);
   })
).done(function() {

    //place your code here, the scripts are all loaded

});

About the author

Добавить комментарий

Сказать спасибо

Способ платежа:

Подписаться на обновления

Укажите свой e-mail чтобы получать уведомления о новых статьях.

Присоединиться к еще 3 подписчикам