jQuery的:如何检查是否图像已完成加载在阿贾克斯图像、加载、jQuery、阿贾克斯

2023-09-10 14:40:26 作者:安如少年初如梦

我需要如何来解决这个周围的一些建议。

I need some suggestion on how to work this around.

我有一个Ajax code中的链接被点击我的页面时执行。阿贾克斯code是调用PHP code查询某个目录中的图像(缩略图大小)的文件名。一旦执行,AJAX数据将有我在该目录中的缩略图文件名并动态地显示在我的网页缩略图。

I have an Ajax code to execute when the LInk is clicked in my page. The ajax code is to call the PHP code to query the images(thumbnail size) filename inside a certain directory. Once executed, the ajax data will have the filenames of my thumbnails in that directory and display the thumbnails in my page dynamically.

我想知道的任何建议,如何检查是否所有缩略图已经装载完毕,而无需使用的setTimeout()?并执行一些jQuery C $ CS $一旦所有缩略图加载。我需要装载我的缩略图,这样就可以把我的缩略图分区的大小滚动。

I want to know any suggestion how to check if all thumbnails are already finished loading without using the SetTimeOut()? and execute some jquery codes once all thumbnails are loaded. I need my thumbnails to be loaded so I can set the size of my thumbnails div for scrolling.

推荐答案

方法:

function imagesLoaded(imgAr, callback){
    var 
        // This is a copy of the array of images
        imageAr = imgAr.slice(0),
        // This holds the javascript Image Objects
        images = [],
        // This is the number of Images that has loaded
        loadedCount = 0;

    var imageLoaded = function(){
        // An image has finished loading, so increment the number of images loaded by 1
        loadedCount++;
        if(loadedCount>=imageAr.length){
            // If all images have finished loading, run the 'callback' function, to report back that images have all loaded
            callback.call();
        }
    }

    // Loop around each image url
    for(var i=0;i<imageAr.length;i++){
        // For each image, create a new object
        images[i] = new Image();
        // when the image finishes loading, call the imageLoaded function
        images[i].onload = imageLoaded;
        // Assign the image the appropriate src attribute
        images[i].src = imageAr[i];
    }
}

使用:

var imageAr = ['a.jpg', 'b.jpg', 'c.jpg'];

imagesLoaded(imageAr, function(){
    alert('Images loaded!');
});