问题：

如何按照DIV窗口中列出的图像的顺序加载图像。这样，首先下载可见的房屋图像，然后在后台下载所有不可见的图像（不滚动）？

更新：

注意，我不描述lazy-loading图片。我想要做的是按照我在DIV窗口中列出的顺序加载图像序列，从顶部开始然后再向下工作。这样，可见图像首先被加载但仍然继续下载不可见图像，而用户不必通过滚动来启动下载。

更新2

如果它有帮助，我的伪代码在我正在谈论的内容之下：

<html>
<script>
var allHomesJSON = ajax_call_to_json_web_service('http://example.com/city=nyc");
for (i=0; i<allHomesJSON.length; i++) {
  document.getElementByID('all-homes').innerHTML += '<div class="individual-listing"><img src="allHomesJSON[i].img">Price: allHomesJSON[i].price, Sqft: allHomesJSON.sqft[i] ...';
}
</script>
<body>
<div id="all-homes" style="height:400px">
</div>

因此生成的HTML就像：

<html>
<body>
<div id="all-homes" style="height:400px">
    <div class="individual-listing"><img src="http://example/x.jpg">Price: $300,000, Sqft: 2000</div>
    <div class="individual-listing"><img src="http://example/y.jpg">Price: $200,000, Sqft: 2000</div>
    <div class="individual-listing"><img src="http://example/z.jpg">Price: $500,000, Sqft: 2000</div>
    <div class="individual-listing"><img src="http://example/a.jpg">Price: $100,000, Sqft: 2000</div>
    ...
</div>

Answer 1

也许为了一些想法筛选一下这个来源：http://www.appelsiini.net/projects/lazyload我实际上不会使用该插件，因为它似乎缺乏回调，在其文档中有一个奇怪的遗漏：

您可以使用
解决此问题

但肯定有一些东西需要从中学习：）

Answer 2

鉴于您以与此类似的方式接收HTML片段，我认为您可以删除所有src属性，然后在之前的图像加载时逐个添加它们，如：

$.ajax({
  source: 'somewhere/over/the/rainbow',
  // ... other options
  success: function(data){

    var images = $('body').find('img').each(function(){
      $.data(this, 'source', this.src);
      this.src = '';
    });

    images.appendTo('body');

    seqLoad(images.children('img:first'));
    seqLoad(images.children('img:eq(2)'));
  }
});

seqLoad()将是这样的函数：

function seqLoad(element){
  element.attr('src', $.data(element, 'source'));

  element.load(function(){
    seqLoad(element.next().next());
  });
}

基本上，我们的想法是获取每个src的{{1}}，然后存储它，然后在加载时逐个将其添加回img标记。当然，这有几个问题，比如说，如果其中一个永远不会加载（这可以通过超时来修复，如果加载时间太长则'跳过'有问题的图像）。启动了两个实例，因为据我所知，大多数浏览器一次只能从同一个域加载两个实例。

只是不要去把你的代码放到你的网站上......我没有时间设置一个合适的测试环境，所以这个东西可能充满了bug。接受这个想法，然后自己写。欢迎任何有关改进的建议。

Answer 3

似乎与这篇文章类似： Javascript: Lazy Load Images In Horizontal Div?

您是否看过此页：http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

它显示了一个jQuery插件，用于执行http://www.appelsiini.net/projects/lazyload

Answer 4

如果您使用Javascript将图像下载到Image对象数组中，则应该可以使用。如果你有一个方法可以安全地用来顺序地将图像下载到那个数组中，那么你可以存储数组的当前位置并在框中显示接下来的4个（或多个）。

var img_array = new Array
for (i=0;i<num_images;i++) {
    var img = new Image();
    img.src = "image"+i+"jpg";
    img_array[i] = img;
}

然后您可以将图像源（使用上面的img.src）加载到图像标记的src属性中。这个方法用于在很多javascript库中预加载图像。

但是，我建议不要强迫用户下载1000张图片，甚至可能无法查看。尝试按照当前显示的顺序下载下四个。

如何从AJAX调用[Web开发]顺序加载图像？

问题：

4 个答案: