Question

鉴于此，预加载图像：

$('<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
 }
);

但它不起作用！

有什么想法吗？

Answer 1

最终尝试

据我所知，您希望能够判断图像何时加载，并且多次执行此操作。上一次尝试和您自己的代码的问题在于，“加载”处理程序仅应用 AFTER 设置并执行新的图像源。请尝试以下尺寸：

$(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
    }
});

[OLD] NEW ATTEMPT

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
        });
}

原始邮寄

来自This Article

的想法

$(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
});

Answer 2

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

$(img1,img2).load(

应该是

$([img1, img2]).load(

当$(img1).attr('src', 'source1');

时，img1.src = 'source1';似乎有点过分

Answer 3

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();  

           }
       });
});

：可能只是控制了所加载图片的总量。

Answer 4

设置'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 */
}

-Stephen

Answer 5

我最近经历了这场噩梦。在我提到the frustrating problems with the image load event时，有几个StackOverflow问题。

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

或者您可以尝试Luke Smith's solution。

jQuery ajax图像预加载

5 个答案:

最终尝试

[OLD] NEW ATTEMPT

原始邮寄