跨 Safari 和 iOS 加载图像的 getJSON 问题

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 成功，但在较慢的连接上，您只想在所有图像都加载到 DOM 后才运行效果。这是一个有效的小提琴：https://jsfiddle.net/rcx3w48b/