Question

我有一个包含图像的文件夹，我正在使用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张图像。我想做两件事：

我想为每个单独的图片添加如下链接：<a href='blog/wp-content/uploads/" + i + ".jpg' class='picLink'>。我在.wrap函数中尝试使用.load，但这对我不起作用。这只会创建一个链接嵌套（例如<a><a></a></a>）。
目前，这会找到前50张照片，从1号开始，然后加载它们。但如果添加更多照片，则无法找到它们，而最老的照片将永远是第一个。我希望它能找到文件夹中的所有照片并首先打印最新（最高编号）。可以假设不会有超过4000张照片。那么可以反过来做这个循环，从4000开始，检查那张照片是否存在并减少工作并加载文件夹中存在的照片？

在此先感谢您的帮助，我希望这个问题足够明确！

Answer 1

对于1.你可以做这样的事情fiddle

$(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表示文件夹中的图像数量。

jQuery图像加载循环 - 包装HTML＆amp;检查尺寸？

1 个答案: