Предположим, у вас есть три столбца рабочего стола макет так:
<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();
Помимо условной загрузки, вы можете минимизировать лет ur файлы JavaScript. Я слышал, что [Chirpy] (http://chirpy.codeplex.com/) хорош. – jhsowter
Или компилятор закрытия Google: http://closure-compiler.appspot.com/home –
@jhowowter - Файлы javascript уже обновлены, но спасибо, что указали мне на Chirpy - определенно посмотрим на это для интрасети asp.net сайт, который у нас есть. – CYMR0