проблема getJSON с загрузкой изображений через Safari и iOS

Question

Я пытаюсь загрузить серию изображений, которые исчезают с интервалом 300 мс при загрузке страницы.

Изображения выбираются случайным образом из файла JSON на основе размеров экрана пользователя.

Это работает в Chrome, но кажется, что происходит сбой в случайном порядке, и вообще не работает в Safari (пауза на случайном изображении) или на iOS (вообще не загружает изображения).

Вотмой код:

// get the screen orientation based on css media query
var orientation = window.getComputedStyle(document.querySelector('body'), ':after').getPropertyValue('content').replace(/['"]+/g, '');

window.slides = [];

// function to randomise the order of an array
function shuffle(a) {
    var j, x, i;
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        a[j] = x;
    }
    return a;
}

$(document).ready(function() {
    $( 'html' ).addClass( 'js' ).removeClass( 'no-js' );

  // define the category and number of slides
  var imageDirs = { "lovers": 16 };

  // get slide urls from json file
  $.getJSON('slides/slides.json', function (data) {
    for (var thisDir in imageDirs) {
      var theseSlides = [];
      theseSlides = data[thisDir][orientation];
      shuffle(theseSlides)
      slides = theseSlides.slice(0, imageDirs[thisDir]);
    }
  })
  .done(function() {
    // randomise order of slides
    shuffle(slides);

    // have one blank slide at the beginning of the animation
    slides.push("initial-slide.png");

    if ( slides.length ) {
      for (var i = 0; i < slides.length; i++) {
        $('#wrapper').append('<img class="slide" src="slides/' + slides[i] + '">');
      }
    }
  });
});

$(window).on('load', function(){
  // wait for images to load before displaying animation
  $('#wrapper').waitForImages(true).done(function() {
    $('#preloader').remove();

    var currentSlides = [];

    $('.slide').each(function(){
      currentSlides.push($(this));
    });

    // remove slides at an interval of 300ms
    var timer = setInterval(function(){
      if (currentSlides.length){
        currentSlides.pop().remove();
      } else {
        clearInterval(timer);
      }
    }, 300);
  });
});

JSFiddle: https://jsfiddle.net/robertirish/6g41vwnL/59/

Живой сайт: http://robertirish.com

Заранее спасибо!

Answer 1

Спасибо за скрипку.В основном ваша проблема в том, что в вашем load событии изображения еще не добавлены в DOM.Вы можете увидеть это, зарегистрировав currentSlides: https://jsfiddle.net/1fb3gczq/

Итак, вы должны убедиться, что DOM готов, прежде чем манипулировать им.Я переместил вашу функцию в ajax success, которая работает в этом случае, но на более медленных соединениях вы захотите запускать эффект только после загрузки всех изображений в DOM.Вот рабочая скрипка: https://jsfiddle.net/rcx3w48b/