javascript - 高分辨率图像加载时图像闪烁

Question

我正在开发一个 Web 应用程序，在该应用程序中，用户可以一一导航到下一个和上一个图像，这些图像放置在文件系统中的某个位置。

我在加载图像时遇到问题。将高分辨率图像加载到容器时，它会闪烁然后渲染。我正在使用 onload 事件来确保以这种方式完全加载图像：

        image.onload = function () {
            $('#img').attr('src', image.src);
        };
        image.src = imagePath;

为了提供更好的用户体验，我尝试首先加载低分辨率图像，以便它立即显示，然后淡出，然后在完全加载时更高分辨率的图像淡入。低分辨率图像立即呈现，但高分辨率图像仍然闪烁，然后显示在容器上。图像更改时看起来不流畅。

我该如何解决这个问题？请提供一些我可以实施的解决方案或想法，以获得更好的用户体验。

Answer 1

setTimeout(function() {
      image.onload = function () {
            $('#img').attr('src', image.src);
        };
        image.src = imagePath;
}, 5000);

您可以使用 settimeout 以便用户看不到闪烁。这可能不是最好的解决方案。但它可能会解决你的问题