3

我有一个发布到 php 脚本的代码，该脚本读取文件夹中的所有文件并返回它们，它们都是 img 的，jquery 解析信息，在一个数组的 var 上，每个图像都保存为带有 src 的 img 对象，宽度，高度和属性，成功后我想检查每个图像是否已加载，然后最后完全触发另一个函数并删除一个 div。但我不知道如何检查图像是否已完全加载，我一直在玩弄 .complete 但它似乎永远不会加载，该函数调用 itef 直到加载 img 然后返回 true 以便它可以保持去。这是代码，它有点乱，可能不是一个很好的编码。

var gAllImages = [];
function checkFed()

{
    var leni = gAllImages.length;   
    for (var i = 0; i < leni; i++) {


        if (!gAllImages[i].complete) {
            var percentage = i * 100.0 / (leni);
            percentage = percentage.toFixed(0).toString() + ' %';
            console.log(percentage);
            //  userMessagesController.setMessage("loading... " + percentage);
            checkFed();

            return;

        }

    //userMessagesController.setMessage(globals.defaultTitle);
    }
}


 if($('slideshow')){
 var topdiv = '<div id="loading"><div class="centered"><img src="/karlaacosta/templates/templatename/images/ajax-loader.gif" /></div> </div>';
    $('#overall').append(topdiv);
    //console.log('alerta');
    var jqxhr = $.post('http://localhost/karlaacosta/templates/templatename/php/newtest.php', function(data){



        var d = $.parseJSON(data);
        //console.log(d[1]);



        if(typeof(d) == 'object' && JSON.parse){
            var len = d.length;
            //console.log(len);



            for(var i = 0; i < len; i++){
                var theImage = new Image();
                var element = d[i].split('"');
                //        console.log(element);
                //      console.log(element[4]);
                theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];
                theImage.width = element[2];
                theImage.height = element[4];                   
                theImage.atrr = element[6];
                gAllImages.push(theImage);

            }





        // console.log(html);
        }else{
            console.log('error');
        }
    }).success(function (){




    setTimeout('checkFed', 150);




    }).error(function(){
        var err = '<div id="error"><h2>Error: Lo sentimos al parecer no se pueden cargar las imagenes</h2></div>';
        $('#loading').append(err);

    }).complete(
        function(){
            var len = gAllImages.length;
            var html = '<ul class="slides">'    
            for(var i = 0; i < len; i++){
                html += '<li><img src="'+gAllImages[i].src+'" width="'+gAllImages[i].width+'" height="'+gAllImages[i].height+'" attr="'+gAllImages[i].attr+'" /></li>';


            }
            html += '</ul>';
            $('#slideshow').append(html);
        }
        );
 jqxhr.complete(function(){
    //
    imageSlide();
    $('#loading').remove();
    //
    console.log('completed');
});
}

如果我取出 checkFed() 的递归性，显然脚本完成了，当图像放在 html 上时，它们加载得很好而且很快，缓存中是否永远不会被加载？也欢迎对代码的其他部分提出任何其他建议。

4

3 回答 3

7

我想检查每个图像是否已加载，然后最终完全触发另一个功能并删除一个 div。但我不知道如何检查图像是否已完全加载

从根本上说，检查图像加载是否成功很简单：

var theImage = new Image();
var element = d[i].split('"');
$(theImage).load(function() {
    // The image has loaded (from cache, or just now)
    // ...do something with the fact the image loaded...
});
theImage.src = '/karlaacosta/images/Fotografia/TODO'+element[0];

上面的关键是在设置事件之前load挂钩事件。如果您先设置，并且图像在缓存中，则该事件可以在下一行代码钩住它之前触发，您会错过它。srcsrcload

这是一个示例：Live copy | 来源

HTML：

<img src="http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG">
<p>When you see the image above, 
<input type="button" id="theButton" value="Click Me"></p>

JavaScript：

jQuery(function($) {

  $("#theButton").click(function() {
    var img = document.createElement('img');
    $(img).load(function() {
      display("Image <code>load</code> event received");
    });
    img.src = "http://www.gravatar.com/avatar/ca3e484c121268e4c8302616b2395eb9?s=32&d=identicon&r=PG";
    document.body.appendChild(img);
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

如您所见，我src在每种情况下都使用相同的 img。在我尝试过的每个浏览器上，我确实收到了该load事件。

于 2012-05-15T22:20:55.827 回答
0

由于浏览器缓存和事件模型的怪异，它无法在没有插件的情况下以可靠的跨浏览器方式实现。试试 imagesLoaded 或 waitForImages。

https://github.com/desandro/imagesloaded

https://github.com/alexanderdickson/waitForImages

于 2012-05-15T22:01:50.670 回答
0

现在你绝对应该只检查.complete价值。例子：

var imgs = document.querySelectorAll("img");
imgs.forEach(function(e) { console.log(e.src + ":" + e.complete); });

有关详细信息，请参阅https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete

如果缓存标头不允许适当的缓存以允许将来自同一 URL 的另一个图像用作在实际内容中加载图像的代理，那么所有尝试收集 URL 并使用new Image()、设置.src和跟踪事件的 hack 都将失败。请注意，即使该代理检测在每个缓存中都会起作用，但如果浏览器实现例如异步图像渲染，它仍然可能在实践中失败。progress

如果.complete用户代理不支持，那么遵循代理对象的进度事件是最不坏的选择。但是，如果.complete支持，它是查询真实状态的唯一真实方式。

于 2021-11-25T11:58:38.093 回答