懒惰(但聪明地)载入内容

看了下面这一行的 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。