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，以便用户看不到闪烁。这可能不是最好的解决方案。但它可以解决你的问题

图像在高分辨率图像加载时闪烁

1 个答案: