jquery - 如何在点击/加载时滑入新加载的图像

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 将获取数据源并将其替换到 IMG 标签的 mainImg 源中。这些图像也是从 CDN 加载的。

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

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

请告诉我，谢谢!

Answer 1

我编写了一个伪代码，希望它能给你带来一些思路。

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