加载更多的点击，而不是首先加载所有的图像

I have created an "overview" container with 100 images. on visit the page will only show one image.

我创建了一个包含100个图像的“概述”容器。访问页面时，只显示一个图像。

When you click "load more" you will see 1 more, etc.. etc..

当你点击“加载更多”时，你会看到更多。等。

<div class="overview">
    <div class="block">
        <img src="http://oi50.tinypic.com/4kyccw.jpg"     alt="image_name_01" />
    </div>
    <div class="block">
        <img src="http://oi46.tinypic.com/2n208j7.jpg"     alt="image_name_02" />
    </div>
    <div class="block">
        <img src="http://oi50.tinypic.com/120me85.jpg"     alt="image_name_03" />
    </div>     
</div>
<div id="loadMore">Load More</div>

What I don't want is to load all the 100 images on visit. but only 1 at the time. (saving bandwidth if you're on a phone or a tablet) without the use of a database.

我不想加载所有访问时的100张图片。但当时只有1人。(节省带宽，如果你在电话或平板电脑上)没有使用数据库。

I used the "load more" from this question: jQuery load first 3 elements, click "load more" to display next 5 elements

我用了这个问题中的“加载更多”:jQuery加载前3个元素，点击“加载更多”显示下5个元素

Example: http://jsfiddle.net/2qjt9/

例如:http://jsfiddle.net/2qjt9/

Any ideas?

什么好主意吗?

2 个解决方案

#1

Using jQuery, you could make clicking the button create the new div rather than just showing it using the .append() feature. http://api.jquery.com/append/

使用jQuery，您可以让单击按钮创建新的div，而不是仅仅使用.append()特性显示它。http://api.jquery.com/append/

Of course writing html in your javascript might get messy. But luckily you already have it prewritten and working, just copy and paste.

当然，用javascript编写html可能会很麻烦。但幸运的是，您已经预先编写并运行了它，只需复制和粘贴。

Using .attr() you could also give the image in each div a src only on click, saving the load bandwidth as well. http://api.jquery.com/attr/

使用.attr()，您还可以仅在单击时为每个div中的图像提供一个src，从而节省负载带宽。http://api.jquery.com/attr/

#2

jsFiddle Demo

jsFiddle演示

The image will only be loaded when it is set to the source of an image. This can be done with new Image().src="url" or in css. However, if you just have an array of strings, then none of the urls will be loaded. For example

只有将映像设置为映像的源时，才会加载映像。这可以通过new Image()来完成。src = " url "或css。但是，如果您只有一个字符串数组，则不会加载任何url。例如

var imgs = [ 
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg",
 "http://www.nasa.gov/images/content/133202main_d_reichart_image2.jpg"
];

So I would store your image urls in an array like that and then use them when the time was right. Something I have taken to recently is using html templates. This would mean defining a set of html to populate

我将你的图像url存储在这样的数组中，然后在合适的时候使用它们。最近我开始使用html模板。这意味着定义一组要填充的html

<div class="picTemplate">
 <img />
</div>

And then removing it right at the beginning

然后一开始就把它移走

var template = $('.picTemplate').remove();

So that you can later clone it in your event for re-use

以便以后您可以在事件中克隆它以供重用

$("#loadMore").click(function(){
 var index = $('.picDisplay .picTemplate').length;
 if( index >= imgs.length ){
  $(this).remove();
  return;
 }
 var next = template.clone();
 var img = next.find('img')[0];
 img.src = imgs[index];
 img.alt = "some name";
 $('.picDisplay').append(next);
});

#1