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

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

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

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

为了提供更好的用户体验，我正在尝试先加载低分辨率图像，以便它立即显示，然后淡出，然后在完全加载时淡入高分辨率图像。低分辨率图像立即渲染，但高分辨率图像仍然闪烁，然后显示在容器上。它看起来不平滑关于图像变化

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

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

---

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

www.jsfiddle.net演示会很好。“请提供一些解决方案”也许，但您不能提供示例代码或更好的示例jsfiddle？？？渐进式jpg会工作吗？在大多数浏览器中，它以您想要的方式执行，加载分辨率较低/不太详细的版本，并在加载时逐渐变得更详细。