Как вставить новое загруженное изображение при нажатии / загрузке - PullRequest
Новая
       19

Как вставить новое загруженное изображение при нажатии / загрузке

0 голосов
/ 11 июня 2018

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

Вот так выглядит урезанная версия моего кода. 

<div>
<img src="image1.jpg" id="mainImg" />
</div>

<div>
    <div class="clickToLoad" data-src="someCDN.com/image2.jpg"></div>
    <div class="clickToLoad" data-src="someCDN.com/image3.jpg"></div>
    <div class="clickToLoad" data-src="someCDN.com/image4.jpg"></div>
    <div class="clickToLoad" data-src="someCDN.com/image5.jpg"></div>
</div>

Когда кто-то щелкает или проводит по одному из div-ов clickToLoad, JS берет data-src и заменяетэто в mainImg src тега IMG.Эти изображения также загружаются из CDN.

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

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

Пожалуйста, дайте мне знать, спасибо!

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Мне понадобилось немного времени, чтобы понять это, но я наконец нашел решение.

По сути, я создал новый элемент IMG на лету и установил абсолютные параметры позиционирования в зависимости от того, каким образом человекспер.В этом примере это будет пролистывание влево.Таким образом, новое загруженное изображение будет располагаться абсолютно справа от основного изображения.

После завершения перехода влево.Он удаляет исходное основное изображение, устанавливает для динамически созданного атрибута ID элементов изображения предыдущий #mainImg, и мы применяем относительную позицию к нему, чтобы он заполнил div и стал видимым.

Вот моя функция, надеюсь, это поможет кому-то еще! 

function imgL(path) {
var width = $('.mainImg').outerWidth();
var height = $('.mainImg').outerHeight();

var newImage = document.createElement('img')
newImage.src = path;
newImage.id = 'img2'
newImage.classList = 'classes';
newImage.height = height;
newImage.width = width;
newImage.style.cssText = 'position: absolute; top: 0px; left:' + width + 'px;';

$(newImage).appendTo('.mainCont');

$('.mainCont').animate({ left: -width }, 400, function () {
    $(this).css('left', '');
    $('#mainImg').remove();
    $('#img2').attr('id', 'mainImg');
    $('#mainImg').css('position', 'relative').css('left', '').attr('width', '100%').attr('draggable', 'false');
});
}
0 голосов
/ 11 июня 2018

Я написал псевдокод и надеюсь, что он принесет вам некоторые идеи. 

Promise.all(Array.prototype.map.apply(querySelectorAll('img'), imgEle => {
            return new Promise((resolve, reject) => {
                imgEle.src = this.getAttribute('data-src')
                imgEle.onload = () => {
                    resolve();
                };
                imgEle.onerror = () => {
                    reject();
                };
            });
        })).then(resArr => {
            window.scrollTo();
            //here control DOM to slide to the expected place
        })
 <img src="" alt="" class="delay" data-src="abc11.jpg">
    <img src="" alt="" class="delay" data-src="abc21.jpg">
    <img src="" alt="" class="delay" data-src="abc31.jpg">
    <img src="" alt="" class="delay" data-src="abc41.jpg">
    <img src="" alt="" class="delay" data-src="abc51.jpg">
    <img src="" alt="" class="delay" data-src="abc61.jpg">
    <img src="" alt="" class="delay" data-src="abc71.jpg">
    <img src="" alt="" class="delay" data-src="abc81.jpg">
    <img src="" alt="" class="delay" data-src="abc91.jpg">
    <img src="" alt="" class="delay" data-src="abc101.jpg">
...