使用parallax.js在加载时图像闪烁

编程问答 2022-06-05

问题描述

我使用pixelcog parallax.js：http://www.sfdecacao.com/（是法文，但此处只有图片很重要）建立了这个网站

您可能会看到，每个使用视差效果的背景图像都需要一点时间来加载，因此在出现之前会有闪光。最初，闪光灯是白色的，但我将网站的背景色设为黑色，以便看起来更自然。但是，我仍在寻找一种解决此问题的方法。问题在于图像仅在屏幕上显示时才加载，而在网站加载时则不加载，因此用户可以看到每次闪光。

这是与问题相对应的最少代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="parallax.js-1.5.0/parallax.js"></script>
    <style>
        body {
            margin: 0;
        }
        .image {
            height: 500px;
        }
        .parallax-window {
            background: transparent;
        }
        .black {
            height: 1000px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div data-parallax="scroll" data-image-src="img1.jpg" class="image parallax-window"></div>
    <div class="black"></div>
    <div data-parallax="scroll" data-image-src="img2.jpg" class="image parallax-window"></div>
    <div class="black"></div>      
    <div data-parallax="scroll" data-image-src="img3.jpg" class="image parallax-window"></div>
    <div class="black"></div>      
</body>
</html>

我的网站的完整源代码在这里：https://github.com/GL150hcknt/SFC

我不确定这是否是由parallax.js引起的，但是如果有人知道如何解决这个问题，那将是一个很大的帮助。

顺便说一句，当我编写这个最小的代码时，我注意到当我重新加载页面时，它一直将我带到页面的中间，而不是将我带到页面的顶部。这是这不是一个实际的问题，因为在实际的网站上不是这样，它仅在此代码中发生，但我想知道为什么吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

frenchhtmljavascriptparallax.js