Использование JavaScript для обслуживания небольших изображений с DOMContentLoaded

Я довольно новичок в JavaScript и пытаюсь придумать собственный скрипт для динамического предоставления небольших изображений пользователям на мобильных устройствах.

Допустим, у меня есть нормальное изображение HTML следующим образом:

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

Затем я придумал простой скрипт, который проверяет размеры страницы ДО загрузки любых изображений (используя событие DOMContentLoaded). В зависимости от размеров входящего экрана, он изменяет размер изображения для предоставления изображения, оптимизированного для этого размера экрана. Это скрипт:

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), так как большая часть этого заключается в попытке выучить язык и придумать что-то действительно полезное для себя.

Спасибо.

Источник

2 ответа

Решение

Скорее всего, это связано с предварительной загрузкой браузера. Если в теге image есть src, то загрузка будет занимать время независимо. Любое из js-решений, которые я видел для адаптивных изображений, имеет пустые / фиктивные теги src, а затем соответствующий img src заменяется.

Мне также нравится эта техника раскомментирования как опция js. Если исходный тег закомментирован, то ничего не будет загружено, тогда вы можете раскомментировать только тот, который вам нужен (в зависимости от вашей работы) https://github.com/DSGNRSteve/Uncomment-Technique-for-RWD

Источник

Для тех, кто сталкивается с этим, это последний код, который я использовал некоторое время. Если вы сжимаете и уменьшаете размер мобильных изображений, вы можете сэкономить около 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

}

?>
Источник
Другие вопросы по тегам