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

I have a real estate application that display homes.

我有一个显示房屋的房地产应用程序。

I use AJAX to populate a fixed height/width DIV "window" with home listings.

我使用AJAX填充固定高度/宽度DIV“窗口”与家庭列表。

Many times, the DIV window can be populated with literally a 1,000 or so house listings.

很多时候，DIV窗口可以填充1000个左右的房屋清单。

Each house listing includes one picture of the property and each house listing is about 100px tall (each "row" is 100px tall).

每个房屋列表包括一个房产图片，每个房屋列表大约100px高（每个“行”是100px高）。

Since my DIV height is only 400px tall, only 4 house listings (of the possible thousands) are visible without scrolling at any given time.

由于我的DIV高度仅为400px高，因此在任何给定时间都不会滚动，只能看到4个房屋清单（可能有数千个）。

Question:

How can I load the images in the order in which I have them listed in the DIV window. That way, the visible house images are downloaded first, and then all of the non-visible images (without scrolling) are downloaded later in the background?

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

UPDATE:

更新：

Note, I am not describing lazy-loading the images. What I want to do is load the images sequentiality in the same order as I have them listing in my DIV window, starting at the top and then working down. That way, the visible images gets loaded first but still continues the download of the non-visible images without the users having to initiate the download by scrolling.

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

UPDATE 2

更新2

In case it helps, I have the pseudo-code below of what I'm talking about:

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

<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>

So the resulting generated HTML is something like:

因此生成的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>

4 个解决方案

#1

Maybe sift through the source of this for some idea: http://www.appelsiini.net/projects/lazyload I wouldn't actually use that plugin, as it seems to lack callbacks, has a weird omission within its documentation:

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

You can workaround this with

你可以解决这个问题

But surely there's something to be learned from it :)

但肯定有一些东西需要从中学到:)

#2

Given that you receive the HTML fragment in a similar manner to this, I think you can remove all of the src attribute, then add them back one by one as the previous images load, something like:

鉴于您以与此类似的方式接收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)'));
  }
});

Where seqLoad() would be a function like this:

seqLoad（）将是这样的函数：

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

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

Basically the idea is to grab the src of each img, store it, then add it back to the img tags one by one as they load. Of course there are several problems with this, like say if one of them never loads (this can be fixed with a timeout that 'skips' the image in question if loading takes too long). Two instances are started, because, as far as I can remember, most browsers can load things from the same domain only two at a time.

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

Just don't go and plonk this code into your site... I don't have time to set up a proper test environment, so this thing's probably riddled with bugs. Take the idea and go write your own. Any suggestions on improvements are welcome.

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

#3

Seems similar to this post: Javascript: Lazy Load Images In Horizontal Div?

似乎与这篇文章类似：Javascript：在水平Div中延迟加载图像？

Have you seen this page: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/

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

It shows a jQuery plugin for doing it http://www.appelsiini.net/projects/lazyload

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

#4

If you use Javascript to download the images into an array of Image objects then that should work. If you have a method you can safely use to sequentially download the images into that array, then you can store the current position of the array and display the next 4 (or however many) in the box.

如果您使用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;
}

Then you can just load the image sources (using img.src like above) into the src attribute of an image tag. This method is used for preloading images in alot of javascript libraries.

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

However, I do advise against forcing users to download 1000's of pictures when they may not even view them. Try downloading the next four in the sequence from where you are currently displaying.

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

#1