HTML5 new Image() 图像需要加载后才能drawImage？ 怎样保证多个Image对象都加载完成？

Posted 2023-05-06

这个只能用回调函数实现，绑定load事件，可以研究下preloadjs这个库
http://www.createjs.com/Docs/PreloadJS/modules/PreloadJS.html 参考技术A 我是用img标记，让图片加载后事件onload回调。再将img内容画到Canvas中。 参考技术B 和规划办法个人体会不放过人挺好

异步图像加载和SEO

我正在研究中间人宝石以异步方式加载图像，效果与Medium相同。

一切都很完美，但关于搜索引擎优化，我不知道会发生什么。图片标签如下所示：<img src="BIG_IMAGE.jpg" data-compress="SMALL_IMAGE.jpg">。以下是脚本正在执行的操作：

• 用data-compress替换SRC
• 创建一个新的Image（）并加载BIG_IMAGE
• 加载BIG_IMAGE后，BIG_IMAGE将替换SMALL_IMAGE

你认为它是SEO友好的，也许更好的设置在div并加载SMALL_IMAGE作为背景或使用画布？

这里的脚本：

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()

答案

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

异步图像加载对排名没有实际影响。在src属性上设置默认图像（质量差），等待它异步加载HQ图像似乎没问题。

有一些技术修复不要忘记，比如为那些在浏览器上禁用JS的人设置noscript标签，然后在图像周围设置一个a标签，指向HQ图像路径，似乎对排名没有太大影响如果你排名的图像扔了一个a或img标签，但无论如何它需要以更好的方式排名。

所以在这里，更好的选择是获得如下代码：

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

链接：https://webmasters.stackexchange.com/questions/61761/lazy-loading-images-and-effects-on-seo

编辑（02/01/2018）：我通过在网站管理员控制台上设置域（没有特定配置）来测试SEO。一切都很好，HQ图像完美索引，而LQ图像则没有。