1

我对 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），因为其中很大一部分是关于尝试学习这门语言并自己想出一些真正有用的东西。

非常感谢。

4

2 回答 2

1

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

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

于 2015-01-03T16:05:30.873 回答
0

对于遇到此问题的任何人，这是我使用了一段时间的最终代码。如果你压缩和缩小移动图片的大小，你可以在每张图片上节省大约 15%，这在谷歌页面速度得分上肯定会有所体现。

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

}

?>
于 2015-08-25T23:49:37.207 回答