Как заставить браузеры предварительно загружать изображение с отображением: нет? - PullRequest
Новая
       21

Как заставить браузеры предварительно загружать изображение с отображением: нет?

0 голосов
/ 12 января 2020

Firefox не будет загружать изображения с отображением: ни один, пока они не потребуются для показа пользователю. Chromium будет зависать до тех пор, пока изображение не будет загружено, а затем отобразит его.

При меньших размерах файлов будет краткий сигнал sh, если изображение еще не загружено в Firefox. При больших размерах файлов задержка значительно увеличивается, что также приводит к заметному зависанию Chromium.

Я бы хотел, чтобы изображения отображались: предварительно не загружено, поэтому при их отображении задержка отсутствует.

Я пытался использовать Javascript для объявления нового объекта Image, но этот не работает с Firefox или Chromium.

Вы можете переключаться между изображениями в этом примере с клавишами со стрелками вправо и влево. 

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}   

.imgs {
    width:50%;
    height: 50%;
}
</style>
</head>
<body>

<img src="https://picsum.photos/200/100" style="display: block;" class="imgs">
<img src="https://picsum.photos/200/200" style="display: none;" class="imgs">

<script>
imgs = document.getElementsByClassName("imgs");

// THIS DOES NOT WORK
//~ function preloadImage(url)
//~ {
    //~ var img = new Image();
    //~ img.src = url;
//~ }

//preloadImage("myImg.jpg"); THIS DOES NOT WORK

document.onkeydown = checkKey; // directional keys

function checkKey(e) {

    if (document.activeElement.tagName != "INPUT") {

        e = e || window.event;

        switch (e.keyCode) {

            case 38:
                // up arrow
                break;

            case 40:
                // down arrow
                break;

            case 37:
                // left arrow
                imgs[0].style.display = "block";
                imgs[1].style.display = "none";
                break;

            case 39:
                // right arrow
                imgs[0].style.display = "none";
                imgs[1].style.display = "block";
                break;
        }
    }
}

</script>
</body>
</html>

1 Ответ

0 голосов
/ 14 января 2020

Я нашел свое собственное решение этой проблемы.

Я использую класс под названием «imgBuffer» для хранения изображений, которые необходимо немедленно отобразить. Изображения этого класса будут содержать источник изображений, которые должны быть легко отображены, но не будут отображать сами изображения.

Сложная задача - убедиться, что скрытые изображения находятся в месте на экране, которое не влияет макет любым способом.

Обратите внимание, что ширина и высота скрытого буферизованного изображения совпадает с шириной отображаемых изображений. Если вы отрегулируете размеры скрытого изображения, страница может вести себя по-разному, например, добавляя полосу прокрутки, когда в этом нет особой необходимости. 

<!DOCTYPE html>
<html>
<head>
<style>
body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}   

.imgs {
    width:50%;
    height: 50%;
}

.imgBuffer {
    position: absolute;
    height: 50%;
    width: 50%;
    visibility: hidden;
    z-index: -1;"
}
</style>
</head>
<body>

<img src="https://picsum.photos/200/100" style="display: block;" class="imgs">
<img src="https://picsum.photos/200/200" style="display: none;" class="imgs">

<img src="https://picsum.photos/200/100" class="imgBuffer">
<img src="https://picsum.photos/200/200" class="imgBuffer">

<script>
imgs = document.getElementsByClassName("imgs");

// THIS DOES NOT WORK
//~ function preloadImage(url)
//~ {
    //~ var img = new Image();
    //~ img.src = url;
//~ }

//preloadImage("myImg.jpg"); THIS DOES NOT WORK

document.onkeydown = checkKey; // directional keys

function checkKey(e) {

    if (document.activeElement.tagName != "INPUT") {

        e = e || window.event;

        switch (e.keyCode) {

            case 38:
                // up arrow
                break;

            case 40:
                // down arrow
                break;

            case 37:
                // left arrow
                imgs[0].style.display = "block";
                imgs[1].style.display = "none";
                break;

            case 39:
                // right arrow
                imgs[0].style.display = "none";
                imgs[1].style.display = "block";
                break;
        }
    }
}

</script>
</body>
</html>
...