как заставить изображение исчезать после того, как другое изображение загружено лениво? - PullRequest
Новая
       1

как заставить изображение исчезать после того, как другое изображение загружено лениво?

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

Я пытаюсь создать эффект затухания изображения после того, как другое изображение загружено с помощью отложенной загрузки

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

Я использую:

lozad.min. js

и пытаюсь сделать преформу javascript следующей 

            // Initialize library
            lozad('.lozad', {
                load: function (el) {
                    el.src = el.dataset.src;
                    $()onload = function () {
                        el.classList.add('fade-out')
                    }
                }
            }).observe();

            lozad('.image-holder', {
                load: function (el) {
                    el.onload = function () {
                        el.classList.add('fade-out')
                    }
                }
            }).observe();
.fade-out {animation: fadeOut ease 2s;-webkit-animation: fadeOut ease 8s;-moz-animation: fadeOut ease 8s;-o-animation: fadeOut ease 8s;-ms-animation: fadeOut ease 8s;}
                @keyframes fadeOut { 0% {opacity:1;} 100% {opacity:0;} }
                @-moz-keyframes fadeOut { 0% {opacity:1;} 100% {opacity:0;} }
                @-webkit-keyframes fadeOut { 0% {opacity:1;} 100% {opacity:0;} }
                @-o-keyframes fadeOut { 0% {opacity:1;} 100% {opacity:0;} }
                @-ms-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }
                .image-holder {position: absolute;top: 0;left: 0;right: 0;bottom: 0;max-width: 100%;display: block;}
                div {width: 400px;height: 400px;display: inline-flex;margin: 10px;position: relative;}
                img {width: 400px;height: 400px;}
                .fail img {display: none;}
    <!DOCTYPE html>
        <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
        <head>
            <meta name="viewport" content="width=device-width,initial-scale=1">
            <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
        </head>
        <body>
                    <div>;
                    <img class="lozad" data-src="https://broom.tv2.no/underholdning/broom/media/images/content/8694/car_page_main.jpg"  alt="" />
                    <img class=" image-holder" src="https://ak9.picdn.net/shutterstock/videos/29176849/thumb/1.jpg"  alt="" />
                    </div>
        </body>
        </html>

У меня возникли некоторые проблемы, например, когда изображение загружается, второе изображение исчезает и появляется снова

Можете ли вы дать мне совет? если это правильный способ сделать это или есть другой эффективный способ сделать это, и может ли этот код работать и конкретные задачи c, и правильна ли инициализация библиотеки сценариев java?

...