如何根据屏幕尺寸为图片动态添加原生懒加载属性？

首先明确：原生懒加载的loading是HTML专属属性，不存在对应的CSS属性，因此无法通过媒体查询的CSS规则直接实现你要的效果。

方案1：按视口宽度断点动态添加属性 #

和你预想的600px断点逻辑一致，通过JS判断视口宽度，符合移动端条件时给图片加loading="lazy"属性：

JS代码 #

document.addEventListener('DOMContentLoaded', () => {
  // 匹配所有需要动态懒加载的图片
  const targetImgs = document.querySelectorAll('.lazy');
  // 视口宽度小于等于600px时添加懒加载属性
  if (window.innerWidth <= 600) {
    targetImgs.forEach(img => img.setAttribute('loading', 'lazy'));
  }
});

HTML代码 #

<img class="lazy" src="photo.jpg" alt="图片描述">

方案2：精准判断图片是否在首屏，动态添加属性 #

不需要固定断点，自动识别所有不在初始首屏的图片添加懒加载，适配所有屏幕尺寸，灵活性更高：

document.addEventListener('DOMContentLoaded', () => {
  const targetImgs = document.querySelectorAll('.lazy');
  targetImgs.forEach(img => {
    const imgPosition = img.getBoundingClientRect();
    // 图片顶部超出视口底部，说明不在首屏范围内
    if (imgPosition.top >= window.innerHeight) {
      img.setAttribute('loading', 'lazy');
    }
  });
});

• 上述JS代码建议放在页面<head>标签中，或添加defer属性，确保在浏览器开始加载图片前完成属性设置，避免属性添加不生效。
• 如果需要兼容不支持原生loading属性的旧浏览器，可以搭配轻量的懒加载JS库使用，核心逻辑和上述方案一致。

内容的提问来源于stack exchange，提问作者Warren Rosenfeld