Question

我正在修改我的HTML以提供更好的网站性能。我使用bootstrap作为我的css样板。我从Google Chrome审核控制台收到的错误之一是：

“指定图像尺寸 - 应指定宽度和高度所有图像，以加快页面显示。以下图片缺少宽度和/或高度：使用所有图像的列表没有指定特定的高度或宽度。“

我遇到的问题是我使用bootstrap，大多数图像都使用img-responsive类。那么当我希望图像能够响应时，我怎么能遵守这条规则呢？

提前致谢。

Answer 1

我很长时间都在脑子里，所以我的可选解决方案是使用JavaScript管理断点并注入宽度和高度。问题是你应该用网站上的一张照片制作这张照片，但就像我说的那样，这是暂时的。

var windowWidth = $(window).width();
if(windowWidth > 700){
   $(".image").attr('width', 232).attr('height', 350);
}

这有助于我避免Chrome警告和页面加载。

注意：当然，你必须在图像之前加载它。