threesixty-slider icon indicating copy to clipboard operation
threesixty-slider copied to clipboard

Flickering on Internet Explorer

Open kacperpl1 opened this issue 10 years ago • 4 comments

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.

kacperpl1 avatar Jan 03 '15 11:01 kacperpl1

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();
  });
};

badursun avatar Mar 18 '15 16:03 badursun

Hi! I solved the issue changing the CSS styles:

.threesixty_images img.previous-image { z-index: -999; }

7osema avatar Jun 01 '15 14:06 7osema

@7osema this solves it indeed thanks. You should PR this.

mhicauber avatar Jan 05 '16 21:01 mhicauber

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.

mhicauber avatar Jan 07 '16 21:01 mhicauber