Question

我想创建一个循环，以加载数组中某个页面的所有图像。它是这样工作的：我有一个包含URL的数组。我想将所有这些页面的图像加载到某个div，但是jQuery load();函数仅从array的一个页面加载图像，并且它是随机进行的。因此，每次我得到的图像都不同，但只有一页。

var pages = ["artificial-waterfall.htm", "artificial-waterfall01.htm", "artificial-waterfall02.htm", "artificial-waterfall04.htm", "artificial-waterfall05.htm", "artificial-waterfall07.htm", "artificial-waterfall08.htm"];

pages.forEach(function(value, i) {   
   $('.slides').append('<div class="slide"></div>')
   $('.slide').load('/russian/wild-stonenew/' + pages[i] + " .fancybox", function(){
      $('.slide .fancybox').attr('data-fancybox', 'gallery1');
   });
});

Answer 1

根据我的评论-加载不是随机的，它仅取决于加载页面所花费的时间，因为每个页面中的加载都是异步的。如果要使其同步，则需要将其移出每个循环，然后在第一页完成后使用回调函数加载下一页。

代替在每个循环中进行加载，您可以执行以下操作：

var pages = ["artificial-waterfall.htm", "artificial-waterfall01.htm", "artificial-waterfall02.htm", "artificial-waterfall04.htm", "artificial-waterfall05.htm", "artificial-waterfall07.htm", "artificial-waterfall08.htm"];

var currentPage = 0;                  // global counter 
var $slidesContainer = $('.slides');  // slide container

addSlide();                           // set loop going

function addSlide() {
  $slide = $('<div class="slide"></div>');  // create new slide
  $slidesContainer.append($slide);          // append to container

  $slide.load('/russian/wild-stonenew/' + pages[currentPage] + " .fancybox", function() {  // load images into slide
    $slide.find('.fancybox').attr('data-fancybox', 'gallery1');    // do your fancybox thing
    currentPage++;                                                 // increment page index

    if (currentPage < pages.length) {                              // load next slide if there is one
      addSlide();
    }
  });
}

Answer 2

您遇到的问题是由于.load()替换了元素的内容。该文档说：

说明：从服务器加载数据并将返回的HTML放入匹配的元素中。

要解决此问题，您可以做一些事情。最简单的方法是将内容附加到元素而不是替换它。例如，可以使用.get()代替.load()。

请记住，内容将根据加载速度“随机”放置。速度最慢的数据将附加到最后，但是刷新后可能会有所不同。

另一个选择是首先在每个URL的内容所在的位置创建占位符。然后使用.load()用远程数据替换占位符的内容。这将使加载的内容按数组的顺序保留，因为您首先为该内容保留了一个点，然后将数据加载到其中。

jQuery load（）;函数不会彼此循环

2 个答案: