Jquery Fade In Fade Out Issue in Safari

Question

I have created this simple image slider using jQuery: Fiddle

I found that it runs perfectly in all the other browsers except for Safari in which it lags quite a bit.

Here's my code snippet of my script:

$(document).ready(function () {
    loadLandingSlider();
});
var counter = 0;

function loadLandingSlider() {
    totalImg = $('#rotating-item-wrapper img').length;

    rotate = setInterval(function () {
        loadImg();
    }, 3000);
}

function loadImg() {
    $('.rotating-item').fadeOut(1000);
    $('#rot' + counter).fadeIn(1000);

    if (counter == totalImg)
        counter = 1;
    else 
        counter++;
}

Is there some workaround for this?

Answer 1

Hi It doesn't lag in Safari (6.0.5) on OSX but your pictures are ways to big. 7 x 500kB is a lot of stuff to load and handle. Maybe this causes your lags.