jquery - 如何基于组从互联网加载图像？

Question

我想加载一个基于块的互联网文件。我有 10 张图片，我想将其拆分为 2 个块以显示在我的网站上，每个块包含 5 张图片。块 1 完成后，块 2 将继续。我怎么能用 jQuery 做到这一点？

Answer 1

行，

首先是 HTML 代码

<div id="imagesPanel">
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   <img src="http://upload.wikimedia.org/wikipedia/en/7/7f/Mickey_Mouse.svg" />
   More Images
</div>

接下来是 Jquery 代码

var countOfImages = 0;
var NumOfImagesPerBlock = 5;
var htmlStr = "";

$("#imagesPanel > img").each(function () {

   if (countOfImages == 0)
   {
       htmlStr += "<div class='imgblock'>";
       $("#imagesPanel").html("");
   }


   htmlStr += $(this)[0].outerHTML;
   countOfImages++;

   if (countOfImages % NumOfImagesPerBlock == 0)
   {
     htmlStr += "</div>";
     htmlStr += "<div class='imgblock'>";
     $("#imagesPanel").append(htmlStr);
     htmlStr = "<div class='imgblock'>";
    //alert("Mod" + countOfImages);
   }  
});

$('.imgblock').each(function(i) {
   $(this).delay(800 * i).fadeOut('fast', function() {
       $(this).fadeIn('slow');
   });
});

我将尽快解释：

1. 我创建了 3 个变量
2. countOfImages - 计算每个函数中图像数量的助手
3. NumOfImagesPerBlock - 保存每块图像数量设置的变量
4. htmlStr - 将保存更新的 html。
5. 然后我将进入所有图像的循环，并在 div 中每 5 个图像排列一次。

基本上我正在基于现有的 HTML 创建新的 HTML。我将悬停所有图像并在每 5 个图像后添加。

小提琴示例

我想指出，如果您使用服务器端语言，您可能希望在服务器中执行此操作。

另一个注意事项：在我的 Fiddle 示例中，我已将图像的宽度和高度限制为 40px 上的 40px，因为如果图像到达页面末尾，它们会自动分解

希望它有所帮助