呵呵。。。我可以问你这有什么意义吗？因为人们会认为这是为了节省带宽和缩短页面加载时间。那么，为什么您总是想加载这三个呢？这个display: none 不会阻止将图像加载到DOM中。它们仍将加载-只是不显示。只需加载最大的一个，使用CSS完全适应浏览器/容器，浏览器就会自动缩小图像。这样可以节省中小型图像加载时间。这只是一张图片。假设有人正在访问你的博客页面（通过手机），页面上显示了20篇帖子。使用您的方法，您必须将加载的图像数量增加三倍，从20个增加到60个（小、中、大各一个）-疯狂！

另一种方法是检测用户实际使用的窗口大小（通过jQuery），然后基于此加载特定图像。我相信您会明白的，因为在jQuery中编写这样的函数并不是那么困难。例如，下面是我为视网膜设备的图像替换编写的fn之一。其工作原理相同-首先，它检测设备是否为高像素密度，如果是，它将图像中的名称从“normal”替换为“retina”，从而更改加载的图像：

jQuery(document).ready(function(){
    if (window.devicePixelRatio > 1) {
        var images = jQuery(\'img\');

        images.each(function(i) {
            var lowres = jQuery(this).attr(\'src\');
            var highres = lowres.replace("normal", "retina");
            jQuery(this).attr(\'src\', highres);
        });
    }
});