懒惰（但聪明地）载入内容

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/feanlau/blog/880492