Having an issue with a website where I am progressively loading multiple images - starting with a smaller resolution image for faster loading and then ajaxing in a larger image (usually the original size uploaded by the user).
The following code functions as intended. However, when viewed on Chrome for Windows, if the larger image is of very high resolution (e.g., 4400 x 4000), the screen turns white and the image disappears. The white spills out of the container (which has overflow:hidden) and covers the entire screen, with only elements having a higher z-index displaying.
When inspecting the element that appears white, it indicates that it's the element and that the image is loaded correctly - the URL is fine and clicking on the image to open in a new tab works just fine.
Any insights into why this might be happening?
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();
});
}