Question

我创建了一个＆＃34;概述＆＃34;容器有100张图片。访问页面时只会显示一张图片。

点击＆＃34;加载更多＆＃34;你会看到另外一个......等等。

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

我不想要的是在访问时加载所有100张图片。但当时只有1个。（如果您使用手机或平板电脑，可以在不使用数据库的情况下节省带宽。

我使用＆＃34;加载更多＆＃34;来自这个问题： jQuery load first 3 elements, click "load more" to display next 5 elements

示例：http://jsfiddle.net/2qjt9/

有什么想法吗？

Answer 1

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

当然在你的javascript中编写html可能会变得混乱。但幸运的是，你已经预先编写并正常工作，只需复制和粘贴即可。

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

Answer 2

<强> jsFiddle Demo

只有在将图像设置为图像源时才会加载图像。这可以使用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"
];

因此，我会将您的图片网址存储在这样的数组中，然后在时机成熟时使用它们。我最近采取的一些措施是使用html模板。这意味着定义一组html来填充

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

然后在开头将其删除

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

这样您以后可以在事件中克隆它以便重复使用

$("#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);
});

单击时加载更多而不先加载所有图像

2 个答案: