0

鉴于此，它会预加载图像：

$('<img />')
    .attr('src', 'source')
    .load(function(){
        $('.profile').append( $(this) );
        // Your other custom code
    });

你知道如何做同样的事情，但对于几个图像？

我尝试了类似的东西：

var img1 = new Image();
var img2 = new Image();
$(img1).attr('src', 'source1');
$(img2).attr('src', 'source2');

$(img1,img2).load(
 function () {
  //code after loading
 }
);

但它不起作用！

有任何想法吗？

4

5 回答 5

4

最后的尝试

据我所知，您希望能够知道图像何时加载，并多次执行。上一次尝试以及您自己的代码的问题在于，“加载”处理程序仅在设置和执行新图像源之后才应用。请试穿这个尺寸：

$(function () {
    var images = ['image1.jpg','image2.jpg' /* ... */ ];
    var imageObjects = [];
    var imagesToLoad = 0;

    for (i = 0, z = images.length; i < z; i++) {
        imageObjects[i] = new Image();
        imagesToLoad++;
        $(imageObjects[i])
            .load(function () {
                if (--imagesToLoad == 0) {
                    // ALL DONE!
                }
                // anything in this function will execute after the image loads
                var newImg = $('<img />').attr('src',$(this).attr('src'));
                $('.profile').append( $(newImg) ); // I assume this is the code you wanted to execute
            })
            .attr('src',images[i]);
            // Notice that the 'attr' function is executed AFTER the load handler is hooked
    }
});

[旧] 新尝试

var images = [ /* you get it by now */ ];
for (i=0,z=images.length;i<z;i++) {
    $('<img />')
        .attr('src', images[i])
        .load(function(){
            $('.profile').append( $(this) );
            // Your other custom code
        });
}

原帖

取自这篇文章的想法

$(document).ready(function(){
    var images = ["image1.jpg","image2.jpg"];
    var loader = new Image();

    for (i=0,z=images.count;i<z;i++) {
        loader.src = images[i];
        // insert some code here to do something with the now-loaded image
    }
    // do something with the now-loaded images.
});

或者，

var images = ["image1.jpg","image2.jpg"];
var loader = [];
$(document).ready(function(){

    for (i=0,z=images.count;i<z;i++) {
        loader[i] = new Image();
        loader[i].src = images[i];
        // insert some code here to do something with the now-loaded image
    }
    // do something with the now-loaded images, using the loader array
});
于 2009-11-25T18:31:28.470 回答
0

您需要创建一个元素数组：

$(img1,img2).load(

应该

$([img1, img2]).load(

$(img1).attr('src', 'source1');当你可以做的时候做这件事似乎有点矫枉过正img1.src = 'source1';

于 2009-11-25T18:29:45.930 回答
0 
function myfun(){
  alert("h");
} 

var xlist = [ "source1", "source2", "source3" ];
var xload = 0;
$.each(xlist, function(){
    var srcImg = this;
    $('<img />')
       .attr('src', srcImg)
       .load(function(){
           xload++;
           $('.profile').append( $(this) );
           if (xlist.length==xload){

             // Your other custom code
             myfun();  

           }
       });
});

评论：可以简单地控制加载的图片总量。

于 2009-11-25T18:32:02.130 回答
0

设置“src”属性时会触发加载。您必须在设置“src”属性之前注册事件。试试这个：

var img1 = new Image(); 
var img2 = new Image(); 
$([img1,img2]).load( function () { //code after loading } );
$(img1).attr('src', 'source1');
$(img2).attr('src', 'source2');

希望这可以帮助！

更新

var images = [ /* you get it by now */ ];
for (i=0,z=images.length;i<z;i++) {
$('<img />')
  .load(function(){
    $('.profile').append( $(this) );
    // Your other custom code
  })  
  .attr('src', images[i]);
  /* you may also try to add .trigger('load') at the end to force it */
}

-斯蒂芬

于 2009-11-25T18:34:25.390 回答
0

我最近经历了这个噩梦。有几个 StackOverflow 问题，我提到了图像加载事件令人沮丧的问题。

跨浏览器实际工作的一种方法是使用计时器并观察图像完成属性（直到它为真）和图像宽度属性（直到它非零）。只需旋转所有图像，直到这对要求对所有图像都成立。

或者您可以尝试Luke Smith 的解决方案。

于 2009-11-25T20:38:14.767 回答