单击时加载更多而不先加载所有图像 [英] Load more on clicking without loading all images first

问题描述

我创建了一个包含100张图片的概览容器。在访问页面时只会显示一个图像。

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

当你点击加载更多时，你会看到另外一个等等..

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>

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

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.

我使用了这个问题的加载更多 ：
jQuery加载前3个元素，点击加载更多元素显示接下来的5个元素

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

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

有什么想法吗？

推荐答案

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

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/

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

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

使用 .attr（）你可以也只在点击时给每个div中的图像 src ，同时也节省了负载带宽。
http://api.jquery.com/attr/

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/

这篇关于单击时加载更多而不先加载所有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！