如何在单击/加载时滑入新加载的图像

Question

我无法弄清楚如何解决这个负载问题。基本上，我需要一个图像，在加载时滑入，这样加载不会断断续续，而是平滑的过渡。

这就是我的代码精简版的样子。

<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>

当有人在其中一个 clickToLoad div 上单击或滑动时，JS 将获取 data-src 并将其替换为 IMG 标签的 mainImg src。这些图片也是从 CDN 加载的。

由于移动设备上的页面速度，我也不想预加载所有图像。

当它们被加载时，它只是加载。我希望它在加载后从左侧或右侧滑入。有谁知道如何去做？我已经编程了一段时间，但我似乎无法解决这个问题 XD。

请告诉我， 谢谢！

Answer 1

我花了一点时间才弄明白，但我终于找到了解决办法。

基本上，我动态创建了一个新的 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');
});
}

Answer 2

我编写了一个伪代码，希望能给你带来一些想法。

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">