使用 JS/Jquery 在所有图像上添加显式宽度和高度答案

【问题标题】：Add explicit width and height on all images with JS/Jquery使用 JS/Jquery 在所有图像上添加显式宽度和高度
【发布时间】：2021-08-15 11:11:27
【问题描述】：

现在谷歌在图像上添加显式宽度和高度很重要，现在我必须在我所有的客户端站点上手动添加它，有没有办法使用 JS/Jquery 在所有图像上添加这些属性？并通过 google pagespeed 测试。

我已经尝试使用此代码，它添加了 attr 但这不会删除标志。

$(document).ready(function(){
  $('img').each(function(idx, img) {
    $(this).attr({
      width: img.naturalWidth,
      height: img.naturalHeight
    })
  });
});

【问题讨论】：

它最有可能不会删除标志，因为使用 JS 添加属性在页面生命周期中为时已晚，无法生效。您需要将它们放入实际的 HTML 源代码中。
如果这与谷歌搜索有任何关系，他们会索引预呈现的页面（没有 javascript），所以 jquery 解决方案不会有效果。
@Kinglish 这已经不是真的了，谷歌有可以解释 JS 的爬虫技术。
@Kinglish 适用于 Chrome 内置的 [lighthouse]：F12/lighthouse 选项卡，然后重新加载您的页面。它运行各种分析，其中之一是<img> 标签是否具有height= 和width= 属性。在分析运行后添加这些对分析没有影响。如上所述，对 页面渲染 时间没有影响，因为img 标签将在没有大小的情况下渲染，加载图像并在获得图像大小时强制页面重新布局。如果 img 标记在首次呈现时具有尺寸，则页面不需要重新布局，从而可能显着提高速度。
任何尝试依赖于由客户自己确定的图像尺寸，当然是没有意义的。这样做的全部目的是提前告诉客户图像尺寸。

标签： javascript html jquery pagespeed lighthouse

【解决方案1】：

仅添加高度和宽度属性是行不通的，您还必须将图像裁剪到其确切尺寸。例如，如果您设置了 100px 的高度和宽度，则图像的高度和宽度也应为 100px。

【讨论】：

【解决方案2】：

尝试使用

$(window).load(function() {}

而不是

$(document).ready(function(){}

【讨论】：

不是我的反对意见，但如果document.ready 不起作用，那么使用window.load 移动要执行的逻辑甚至更晚 不会解决问题。