使用 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 的理解如下：

当文档已触发 DOMContentLoaded 事件时 完全加载和解析，无需等待样式表、图像、 和副车架以完成加载

（摘自MDN）

我知道这与这个问题并不真正相关，但如果有人也有SEO背景，那么从SEO的角度来看，知道这种行为是否以任何方式具有破坏性将是有用的。

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

非常感谢。

Answer 1

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

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

Answer 2

对于遇到这种情况的任何人，这是我使用一段时间的最终代码。如果您压缩并减小移动图像的大小，则可以在每张图像上节省约15%，这无疑反映在Google页面速度得分中。

enter code here
<?php
// This function generates images of the correct dimensions for the 
//device viewing them, to save on bandwidth
// It takes the following parameters:
// 1. The name of the container in which the image will be placed
// 2. The src of the larger image
// 3. The src of the smaller image (note this is also used as the
//default image if JS is 
// turned off, see the <noscript> tag at the bottom
// 4. The image class
// 5. The image alt text
function generate_image($image_container_name, $big_image, 
$small_image, $image_class, $image_alt){
?>

<script type="text/javascript">
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 >= 651){
var largeImage = true;
}
else if(x <= 650){
var smallImage = true;
}
if(largeImage){
var myImage = document.createElement("img");
myImage.setAttribute("src", "<?php echo $big_image; ?>");
myImage.setAttribute("class", "<?php echo $image_class; ?>");
myImage.setAttribute("alt", "<?php echo $image_alt; ?>");
var element = document.getElementById("<?php echo 
$image_container_name; ?>");
element.appendChild(myImage);
}
if(smallImage){
var myImage = document.createElement("img");
myImage.setAttribute("src", "<?php echo $small_image; ?>");
myImage.setAttribute("class", "<?php echo $image_class; ?>");
myImage.setAttribute("alt", "<?php echo $image_alt; ?>");
var element = document.getElementById("<?php echo 
$image_container_name; ?>");
element.appendChild(myImage);
}
});

</script>
<div id="<?php echo $image_container_name; ?>"></div>
<noscript>
<img src="<?php echo $small_image; ?>" class="<?php echo $image_class;
?>" alt="<?php echo $image_alt; ?>" />
</noscript>
<?php
}
?>