threesixty-slider
threesixty-slider copied to clipboard
Flickering on Internet Explorer
So on IE11 in win 8.1 when you rotate first time after load each image flicker white when first shown. It looks like those aren't pre-rendered on IE. I'm not using the initial spin option but during that spin it also flickers. The repro works in demos.
Hey, hi.
I found a solution like this
threesixty.js line 137 method, replace this
/**
* @method loadImages
* @private
* The function asynchronously loads images and inject into the slider.
*/
var brk = 0; // as counter
base.loadImages = function() {
var li, imageName, image, host, baseIndex;
li = document.createElement('li');
baseIndex = AppConfig.zeroBased ? 0 : 1;
imageName = !AppConfig.imgArray ?
AppConfig.domain + AppConfig.imagePath + AppConfig.filePrefix + base.zeroPad((AppConfig.loadedImages + baseIndex)) + AppConfig.ext + ((base.browser.isIE()) ? '?' + new Date().getTime() : '') :
AppConfig.imgArray[AppConfig.loadedImages];
image = $('<img>').attr('src', imageName).attr('id', brk).addClass('current-image').appendTo(li);
frames.push(image);
base.$el.find(AppConfig.imgList).append(li);
// this is my solution for IE
if(brk>0){
$("#"+brk).addClass('previous-image').removeClass('current-image');
}
brk+=1;
$(image).load(function () {
base.imageLoaded();
});
};
Hi! I solved the issue changing the CSS styles:
.threesixty_images img.previous-image { z-index: -999; }
@7osema this solves it indeed thanks. You should PR this.
woops not resolved for me in fact. I thought the fix provided by @7osema worked, but I probably just had images already loaded in cache or something.
Related to #75 ? Issue looks the same.
The issue really occurs on first spin, it looks like the browser has to display all images once to behave correctly.
This occurs on IE11 on a WinRT tablet.