Javascript 异步图像加载和搜索引擎优化

我正在开发一个中间人gem来异步加载图像，效果与Medium相同

一切都很完美，但关于搜索引擎优化，我不知道会发生什么。图像标记如下所示：

。以下是脚本正在执行的操作：

• 用数据压缩替换SRC
• 创建新图像（）并加载大图像
• 加载大图像后，大图像将替换小图像

你认为它是SEO吗？也许把它放在一个div中，然后加载小图片作为背景或使用画布会更好吗

下面是脚本：

var AsyncImage = {
  init: function () {
    this.els = document.querySelectorAll("[data-compress]")
    this.engine()
  },
  engine: function () {
    for (var i = 0; i < this.els.length; i++) {
      var el = this.els[i]
      var d = el.src
      this.small(el)
      this.load(el, d)
    }
  },
  load: function (el, d) {
    var img = new Image()
    img.src = d
    img.onload = function () {
      el.src = img.src
      el.classList.add('async-large-loaded')
      el.classList.remove('async-small-loaded')
    }
  },
  small: function (el) {
    el.src = el.dataset.compress
    el.classList.add('async-small-loaded')
    delete el.dataset.compress
  }
}

AsyncImage.init()

var AsyncImage={
init：函数（）{
this.els=document.querySelectorAll（“[数据压缩]”）
这个引擎（）
},
引擎：功能（）{
对于（var i=0；i

最后，我在网站管理员社区找到了我问题的答案，但我认为在这里发布也会很有趣

异步图像加载对排名没有实际影响。在src属性上设置默认映像（质量不好），等待异步加载HQ映像似乎可以

还有一些技术上的修正，比如为在浏览器上禁用JS的用户设置一个

noscript

标记，然后在图像周围设置一个

a

标记，指向HQ图像路径，如果你给一张图片加上

a

或

img

标签，似乎对排名没有太大的影响，但无论如何都需要以更好的方式对它进行排名

因此，更好的选择是获得如下代码：

<a href="BIG_IMAGE.jpg">
  <img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg">
</a>

链接：

---

编辑（2018年1月2日）：我通过在网站管理员控制台上设置域（无特定配置）来测试SEO。一切都很好，HQ图像是完美的索引，而LQ图像不是

我投票结束这个问题，因为它是在征求SEO建议。它可能是关于主题的。是的，但它主要涉及代码。但如果你这么认为，我会在几分钟内关闭它。谢谢你的建议！关于代码本身的问题（或问题）将是主题，但正如目前所问，回答这个问题需要SEO专业知识（询问它是否对SEO友好；询问什么可能对搜索引擎更好），这是离题的。-我是这么想的，但我的选票只占1/5，所以你也可以留待其他人是否同意。