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

}

?>

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

2 个答案: