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

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

1 голос
/ 07 февраля 2012

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

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

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

Любая помощь будет высоко ценится!

Ответы [ 4 ]

1 голос
/ 07 февраля 2012

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

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

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

1 голос
/ 07 февраля 2012

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

1 голос
/ 07 февраля 2012

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

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

0 голосов
/ 24 января 2014

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

<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();
...