使用 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 分析结果时，我发现该页面仍在加载原始图像（尽管以某种方式非常小，通常为几百字节），因为以及较小的 'replacement' 图像。所以我的问题是原图是怎么加载的，因为我对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 的角度了解这种行为是否以任何方式造成损害会很有用。

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

非常感谢。

Answer 1

我怀疑这很可能与浏览器预取有关。如果图像标签上有 src，那么无论如何它都会花费加载时间。我见过的任何用于响应式图像的 js 解决方案都有 empty/dummy 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

}

?>

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

Using javascript to serve smaller images with DOMContentLoaded

javascript

seo

pagespeed

domcontentloaded

google-search-console