随着页面的复杂化，我们往往需要加载越来越多的图片资源，提高页面性能就变得至关重要。其中一种优化方式便是采用异步加载图片的方法。

通常情况下，我们向页面中插入图片元素时，浏览器会在加载页面的同时进行图片的下载。由此产生的问题便是，页面必须在图片完全下载完成之后才能进行渲染，这会严重影响网页的加载速度和用户的体验。而采用异步加载图片的方式，则可以最大程度地提高页面的响应速度。

在JavaScript中，我们可以使用Image对象进行异步加载图片。例如：

var img = new Image();
img.onload = function() {
console.log('图片加载成功！');
};
img.onerror = function() {
console.log('图片加载失败！');
};
img.src = 'https://example.com/img.jpg';

上述代码使用Image对象异步加载一张图片，并在图片加载成功或失败时分别对应执行onload和onerror函数，这其中最关键的是img.src的设置，它会触发图片资源的下载过程。

当然，上面的代码还不够完善，我们需要处理图片的缓存问题，避免重复下载同一图片的情况。一种方案便是将图片的URL作为对象的属性存储在一个Map集合中，例如：

var cache = new Map();
function loadImage(url) {
if(cache.has(url)) {
//从缓存中加载图片
return Promise.resolve(cache.get(url));
}
//异步加载图片
return new Promise(function(resolve, reject) {
var img = new Image();
img.onload = function() {
cache.set(url, img);
console.log('图片加载成功！');
resolve(img);
};
img.onerror = function() {
console.log('图片加载失败！');
reject(new Error('load image error: ' + url));
};
img.src = url; 
});
}

在这里，我们使用Promise来处理异步回调函数，在函数loadImage中，首先判断图片是否已经被缓存（Map集合），如果已经被缓存则直接返回Promise的resolve状态，否则就执行异步加载并返回Promise对象，这样就可以在页面中轻松地异步加载图片了。

需要注意的是，在使用Promise确保了图片加载完成之后，还需要手动将其添加到DOM中。例如：

var url = 'https://example.com/img.jpg';
loadImage(url).then(function(img) {
var body = document.querySelector('body');
body.appendChild(img);
});

通过上面的示例，可以看出使用JavaScript异步加载图片的方法极为简单高效，可以提高页面的加载速度和用户交互的体验。当然，在实际应用中还有许多问题需要解决，例如如何处理图片的大小、错误处理等等，为了提高网页性能的同时，我们还需要不断地探索和优化。