JQuery load();函数不会为每个循环

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()用远程数据替换占位符的内容。这将使已加载的内容以数组的顺序保留，因为您首先保留一个内容，然后将数据加载到其中。