看了下面这一行的 jQuery 代码,明白动态地加载是怎么样做的。
$(document).ready(function(){
$.get("slides-html", function(data){
var sNav = [
'<ul class="slide-nav">',
'<li><a class="prev" href="#welcome-slides">Previous</a></li>',
'<li><a class="next" href="#welcome-slides">Next</a></li>',
'</ul>'
].join("");
$(".welcome .slides")
.append(data)
.wrapInner('<div class="slidewrap"><div id="welcome-slides" class="slider"></div></div>')
.find(".slidewrap")
.append(sNav)
.carousel({
slide:'.figure'
});
});
});
还有进步的空间,可以将图像设定成只显示于指定屏幕,令脚本取决于分辨率。再如,若要限制脚本在小屏上加载,可在脚本上加入简单的分辨率测试。
if(screen.width>480){
$(document).ready(function(){....});
}
在 JavaScript 里,开头的 if 陈述等同于媒体查询的 min-width:480px,若屏幕窄于 480px,内附的 JavaScript 就不会失效了。
这个方法还可以精炼。例如,可用轻型的 JavaScript 载入器 LabJS(http://labjs.com)或者 HeadJS(http://headjs.com), 动态地加载 jQuery、走马灯插件和 custom.js。或者,可以在分辨率高于某个数值时才载入 JavaScript。