使用JavaScript与媒体查询配对加载大图像

Question

我一直在查看PPK的文章here，或许是在使用媒体查询时加载正确图像的更有效方法。他建议加载它们的主要方式是将JS与CSS配对。所以代码看起来像这样：

@media all and (max-width: 900px) {
// styles go here for screen widths less than 900px wide
}

if (document.documentElement.clientWidth < 900) {
// script to load the images goes here for screen widths less than 900px wide
} 

我想弄清楚的是，加载图像的最佳方法是什么？它是使用新Image（）的旧skool方式还是用jQuery追加东西的方式？有没有一个服务器应变比另一个少？

Thanx in advannce ...

Answer 1

服务器应变？无论哪种方式，您都在提供图像数据，而且没有很多方法可以做到这一点。您只需为每个图像发出请求，服务器就会响应。您可以做的最好的事情是确保使用正确的Cache-Control标题提供图像。

var img = new Image();
img.onload = function() {
  alert('woot');
};
img.src = url;

这很简单，很容易在循环中完成，并且可以在完成后处理回调。