200 slides demo crashes on iPad

[pasine]

I have a problem with a slider with many slides crashing on safari mobile (iPad 3, iOS 6.1.3). So I tried your stress test with 200 slides and I have noticed it runs out of memory too. Do you think there is something I can do to prevent this? I am looking at your code to find if it is possible to reduce memory usage: do you have any suggestion?

[pasine]

I have tried to create empty slides as suggested here https://github.com/iosscripts/iosslider/issues/111#issuecomment-10191881 but the problem persists. I have tested with different numbers of slides, but Safari crashes with more than 150/180 elements.

[denisborovikov]

May be related to #287

[evanbutera]

Im running a similar slider, 200+ large images inside a slider. I've seen it crash on ipad and ie8, till ive added something like this.

//img tag generation

function loadImg(src, container) {
    var img,
        image = new Image();
        image.src = src.attr("data-src");
    img = image;

    image.onload = function() {
        var div = container;
        if(!div.hasChildNodes()){
            div.appendChild(img);
       }
    }
}

//ipad optimizer

 function visibleSlides(targetSlideNumber, sliderClass){
    if (isNaN(targetSlideNumber)) {
        return;
    }

    var slideNumber = targetSlideNumber,
        visible = [],
        nextSlideIndex,
        prevSlideIndex,
        slides = $(sliderClass).find('.item');
        ((slideNumber +1) > slides.length +1)? nextSlideIndex = 1 : nextSlideIndex = slideNumber +1;
        ((slideNumber -1) == 0)? prevSlideIndex = slides.length : prevSlideIndex = slideNumber -1;
for (var i = 1; i < slides.length +1 ; i++){
        if ((i == nextSlideIndex) || (i == prevSlideIndex) || (i == slideNumber)){
           visible.push(slides[i - 1]);
        }

};
$.each($(visible), function(i){
    loadImg($(visible[i]),this)
});

};

Adding data-src="path/to/img.jpg" to every single empty slide.

and calling visibleSlides onSlideChange / onSlideLoad works quite well, far form being optimized, just a raw example.

[denisborovikov]

I mage the same thing, but when all images viewed (i.e. loaded), browser is (chrome in my case) slowed down again.

[evanbutera]

you can always .empty() all other elements.

image.onload = function() {
    var div = container;
    if(!div.hasChildNodes()){
        div.appendChild(img);
   }
 else{
      div.empty();
 }
}

hope can help somehow.

This is not a real solution, just a way to make it work. Ive found an huge issue using .empty() , btw: sometimes image rendering simply dont work.

Using the same script on canvas istead of images (i must create a fallback for ie8) solves the problem and speed it up quite alot.

in canvas case you can avoid the .append part and use a canvas as .item element, then just clean the canvas if needed.

[marcwhitbread]

I have proposed a fix for this issue in v1.3.36. See issue #327. Deployed on master.