在 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

感谢 fiddle。基本上你的问题是，在你的 load 事件中，图像还没有被附加到 DOM 中。您可以通过记录 currentSlides 来查看：https://jsfiddle.net/1fb3gczq/

因此，您需要确保 DOM 在操作它之前已准备就绪。我已将您的功能移至 ajax 成功，这在这种情况下有效，但在较慢的连接上，一旦所有图像都加载到 DOM 中，您只需要运行效果.这是一个有效的 fiddle：https://jsfiddle.net/rcx3w48b/

在 Safari 和 iOS 中加载图像时出现 getJSON 问题

getJSON issue with loading images across Safari and iOS

javascript

jquery

json

image

preloading