Question

我正在尝试加载一系列图像，这些图像在页面加载时以300ms的间隔消失。

图像是根据用户屏幕尺寸从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/

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

1 个答案: