javascript - 使用 javascript 通过 DOMContentLoaded 提供较小的图像

Question

我对 JavaScript 还很陌生，一直在尝试编写自己的脚本来为移动设备上的用户动态提供较小的图像。

假设我有一个正常的 HTML 图像如下:

<img id="test" src="https://www.example.com/pictures/myimage.jpg" />

然后我想出了一个简单的脚本，在加载任何图像之前检查页面尺寸(通过使用 DOMContentLoaded 事件)。根据传入的屏幕尺寸，它会更改图像 src 以提供针对该屏幕尺寸优化的图像。这是脚本:

document.addEventListener("DOMContentLoaded", function(event){

var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0],
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight|| e.clientHeight|| g.clientHeight;

if(x >= 1000)
{
var largeImage = true;
}

else if(x <= 999 && x >= 651)
{
var mediumImage = true;
}

else if(x <= 650)
{
var smallImage = true;
}

if(largeImage){
// Do nothing as the image is the right size (large)
}

if(mediumImage){
var imageSrc = document.getElementById("test").src.toString();
document.getElementById("test").src = imageSrc.replace("/myimage.jpg","/medium/myimage.jpg");
}

if(smallImage){
var imageSrc = document.getElementById("test").src.toString();
document.getElementById("test").src = imageSrc.replace("/myimage.jpg","/small/myimage.jpg");
}
});

为可怕的黑客攻击代码道歉，但它确实有效并且为移动设备节省了 2% 的加载时间。

但是，当我使用 Google Page Speed Insights 分析结果时，我发现该页面仍在加载原始图像(尽管不知何故尺寸非常小，通常为几百字节)，以及较小的“替换” ' 形象也是如此。所以我的问题是原始图像是如何加载的，因为我对 DOMContentLoaded 的理解如下:

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading

(摘自MDN)

而且我知道这与问题并不相关，但如果有人也有 SEO 背景，那么从 SEO 的 Angular 来看这种行为是否会以任何方式造成损害会很有用。

我宁愿坚持使用 JavaScript(而不是使用 JQuery)，因为其中很大一部分是关于尝试学习这门语言并自己想出一些真正有用的东西。

非常感谢。

Answer 1

我怀疑这很可能与浏览器预取有关。如果图像标签上有 src，那么无论如何它都会花费加载时间。我见过的任何用于响应式图像的 js 解决方案都有空/虚拟 src 标签，然后相应的 img src 被换入。

我也非常喜欢这种取消注释技术作为 js 选项。如果原始标签被注释，则不会加载任何内容，然后您只需取消注释您需要的标签(基于您现有的工作)https://github.com/DSGNRSteve/Uncomment-Technique-for-RWD