javascript - 从 javascript 加载 chrome(windows) 中的高分辨率图像问题

Question

我的网站有问题。我的问题是我正在逐步加载多个图像 - 从一个小分辨率图像开始以快速加载然后我将一个更大的图像加载到(通常是用户上传的原始尺寸)。

下面的代码完美运行。但是，在 Windows 上的 chrome 上完成时。如果更大的图像是真正的高分辨率(比如说 4400 x 4000)。屏幕会变白，图像会消失。白色从容器(溢出:隐藏)中溢出并覆盖屏幕。仅显示图像上具有更高 z-index 的元素。

如果我检查白色元素。它显示它是元素，并且图像已加载 - URL 没问题，如果我单击图像以在另一个选项卡中打开它加载正常。

有人知道为什么会这样吗？

if(href){


   var img = document.createElement('img');
   img.className = 'openLBFullView hidden';
   img.onload = function(){
       loadBiggerImg(this);
   };

   $(img).data('url',$currentImg.data('url'));
   img.src = href;
   img.id = 'my-image';

}

var loadBiggerImg = function(img){
     var originalImg = $('#my-image');

     //append the img to the document
     originalImg.before(img);

     // append original styles and classes to new image
     $(img).attr('style',originalImg.attr('style'));
     $(img).attr('class',originalImg.attr('class'));

     // fix for windows IE adding attributes
     $(img).removeAttr('width').removeAttr('height');

     //fade in new image over the top and remove old one
     $(img).fadeIn(200,function(){
        originalImg.remove();
     });

}

Answer 1

可能的解决方案之一 - large images dont render in chrome

虽然这不一定会解决您的问题 - 我会尝试使用缩放到高分辨率的低分辨率 jpeg 并预加载大的 - 一旦加载淡化低分辨率并显示大的(以某种方式伪造渐进式 JPEG) - 希望有帮助男人。