高分辨率图像加载时图像闪烁答案

【问题标题】：Image Flickering on high reolution image loading高分辨率图像加载时图像闪烁
【发布时间】：2013-05-29 21:21:44
【问题描述】：

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

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

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

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

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

【问题讨论】：

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

标签： javascript jquery html css

【解决方案1】：

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

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

【讨论】：