Адаптивный дизайн - Как не загружать определенные скрипты?

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

Есть ли способ загрузки только определенных скриптов в зависимости от устройства?

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

Любая помощь приветствуется!!

Источник

4 ответа

Решение

Modernizr делает обнаружение функций и может условно загружать ресурсы. Это более или менее стандартно для такого рода вещей, если вы не раскроете свои собственные.

Источник

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

На этой странице есть некоторая информация о динамической загрузке скриптов, которую, я полагаю, вы ищете: http://unixpapa.com/js/dyna.html

Источник

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

В противном случае серверное решение, вероятно, будет работать лучше:

Как определить, является ли это мобильным устройством с PHP?

Источник

Предположим, у вас есть макет рабочего стола с тремя столбцами, подобный этому:

<body>
  <div id="ad-1">
  //javascript1 goes here
  </div>
  <div id="content">
  //content goes here
  </div>
  <div id="ad-2">
  //javscript2 goes here
  </div>
</body>

И предположим, что вы создали адаптивный сайт такой, что:

@media screen and (max-width: 1024px) {
  #ad-1{ display: none; }
}
@media screen and (max-width: 768px) {
  #ad-2{ display: none; }
}

Вы не хотите загружать сценарии, если они не видны, поэтому вот способ решить это:

var ResponsiveScriptsLoader = {

onAdsReady: function() {
  console.log('success');
},

addScripts: function(scripts, callback) {
  for (var i = 0; i < scripts.ads.length; i++) {
    this.include(scripts.ads[i].src, scripts.ads[i].selectorID);
    if(i==scripts.ads.length-1) callback();
  }
},

include: function(what, where) {
    var deferred = new $.Deferred(), place;
    var e = document.createElement('script');
    e.onload = function () { deferred.resolve(); };
    e.src = what;
    place = document.getElementById(where);
    if(place) {
        place.appendChild(e);
    }
    return deferred.promise();
},

init: function(){
if(screen.width > 768){ 
    if(screen.width > 1024){
        this.addScripts({
        ads: [
        {
            src: "http://ads.script1.js",
            selectorID: "ad-1"
        }, 
        {
            src: "http://ads.script2.js",
            selectorID: "ad-2"
        }
        ]}, this.onAdsReady);
    } else{ // Screen size is between 769 and 1023
        this.addScripts({
        ads: [
        {
            src: "http://ads.script2.js",
            selectorID: "ad-2"
        }
        ]}, this.onAdsReady);
      }
    }
}
}   

ResponsiveScriptsLoader.init();
Источник
Другие вопросы по тегам