jQuery Image Load Loop - Wrap HTML & Check Size?

jQuery Image Load Loop - Wrap HTML & Check Size?

本文关键字：amp Check Size HTML Load Image Loop Wrap jQuery      更新时间：2023-09-26

我有一个包含图像的文件夹，我正在使用jQuery加载这些图像。此代码：

$(function () {
    var i=1;
    for (i=1;i<=50;i++){
        var curImg = "blog/wp-content/uploads/" + i + ".jpg";
        var img = new Image();         
        $(img).load(function () {                                 
             $(this).hide();
             $('#loader').removeClass('loading')
                         .append(this);
             $(this).fadeIn();
         }).error(function () {})                            
         .attr('src', ''+curImg+'');                    
    }
});

从此文件夹中顺利加载 50 张图像效果很好。我正在尝试做两件事：

  1. 我想添加一个这样的链接：<a href='blog/wp-content/uploads/" + i + ".jpg' class='picLink'>到每个单独的图像。我在这里尝试过在我的.load函数中使用.wrap，但这对我不起作用。这只会创建一个链接巢(例如 <a><a></a></a> (。
  2. 目前，这会找到前 50 张照片，从第 1 位开始，并加载它们。但是，如果添加更多照片，它们将无法找到，并且最旧的将永远是第一个。我希望它找到文件夹中的所有照片并首先打印最新的(最高数字(。可以假设不会超过4000张照片。那么是否可以反向执行此循环，从 4000 开始，检查该照片是否存在并向下工作并加载文件夹中存在的照片？

提前感谢您的任何帮助，我希望问题足够清楚！

对于 1。 你可以做这样的事情 小提琴

$(function () {
    var i=1;
    for (i=1;i<=50;i++){
        var curImg = "blog/wp-content/uploads/" + i + ".jpg";
        var img = new Image();         
        $(img).load(function () {                                 
             $(this).hide();
             $('#loader').removeClass('loading')
                         .append($('<a href="'+this.src+'"></a>').append(this));
             $(this).fadeIn();
         }).error(function () {})                            
         .attr('src', ''+curImg+'');                    
    }
});

此外，它们可能不符合顺序，因为某些图像的加载时间可能比其他图像更长。

对于 2.我认为您应该在服务器端获取图像计数并将其注入 for 循环中，如下所示：

for (i=<?php echo $count; ?>; i > <?php echo ($count>50?$count-50:0); ?>; i--){

假设您使用的是 PHP，其中 $count 表示文件夹中的图像数量。

相关文章：