Question

我使用此代码来设置整个网站的不透明度。

HTML
<body>
        <script>document.body.className += ' fade-out';</script>
...
</body>

JS
$(function(){
            $('body').removeClass('fade-out');
});

CSS:
body{
  transition:1s all;
}
body.fade-out {
    opacity: 0;
    transition: none;
}

以此笔为例： https://codepen.io/timsim/pen/bWOoYr

这会激活网站的不透明度，但不会等待所有图片都准备好显示。整个网站正在改变不透明度，然后图像跳入。不好看。这只会在第一次加载网站时发生。

我想在图像准备好显示时触发正文不透明动画。 window.onload似乎不是正确的地方。你会怎么做？

Answer 1

将jQuery代码包装在内：

$(window).on("load", function() {
});

不要使用$(document).ready();

在未加载图像时，DOM也准备就绪。一旦完成图像下载，将触发加载。所以在你的情况下：

$(window).on("load", function() {
  $('body').removeClass('fade-out');
});

这应该做你想要的

Answer 2

您可以创建一个预加载图像的功能。然后，每一个加载后你就可以删除该类。

const images = ['https://pbs.twimg.com/media/C7gflT8XUAAhsHm.jpg'];

function loadImg(img) {
  return new Promise((resolve, reject) => {
    const imgEl = document.createElement('img');
    imgEl.addEventListener('load', () => {
      resolve();
    });
    imgEl.src = img;
  });
}

function loadAll(imageArr) {
  const promises = imageArr.map(img => loadImg(img));
  Promise.all(promises).then(() => {
    document.querySelector('body').classList.remove('fade-out');
  });
}

loadAll(images);

Answer 3

我认为setTimeout将是一个不错的选择：

$(function(){
            $('body').setTimeout(removeClass('fade-out'), 3000);
});

将延迟淡出3秒

所有图片准备好显示后显示网站

3 个答案: