如何延迟 JavaScript 代码，直到所有图像都加载到内存中

Question

我没有 JavaScript 知识。我正在尝试延迟 $('#image').reel 代码，直到图像被加载，以便我可以获得图像宽度值。

   stitched: imgwidth,
   loops: false,
   frames: 30,
   frame: 1,
   wheelable: false
   // speed: 0,
   // timeout: 1
}); 

function imageReel() {
    $('#image').empty();
    var image = '<img id="image" src=\'images/' + arrReel[imgcount] + '.png\' width="1000" height= "700" />';
    $('#image-wrapper').html(image);
    $('#image').reel({
        stitched: imgwidth,
        loops: false,
        frames: 30,
        frame: 1,
        wheelable: false
        // speed: 0,
        // timeout: 1
    });
    console.log(imgwidth);
}

根据第一个答案尝试 1

 $('#image').empty();
        // var image = '<img id="image" src=\'images/'+arrReel[imgcount]+'.png\' width="1000" height= "700" />';

      $(function(){
      image=new Image();
      image = '<img id="image" src=\'images/'+arrReel[imgcount]+'.png\' width="1000" height= "700" />';

        image.onload=function(){
           $('#image-wrapper').html(image);
           $('#image').reel({

            stitched:    imgwidth,
            loops:       false,
            frames:       30,
            frame:        1,
            wheelable: false, 
            // speed:       0,
            // timeout:     1
          }); 
    };
    $('body').append(image);
});

结果。仍然给我 0 宽度加上创建多个图像

根据 kilian 的回答尝试 2

 <div id="image-wrapper"><img id="image" src='images/outsidedark.png' width="1000" height= "700" onload="someFunction()" /></div>

        function someFunction()
        {
            console.log(imgwidth);
            $('#image').reel({

            // stitched:    3208,

            stitched:    imgwidth,
            loops:       false,
            frames:       30,
            frame:        1,
            wheelable: false, 
            // speed:       0,
            // timeout:     1
          });


        }

结果 图像不断加载。可能是因为插件，但我认为我需要 onload 只加载该函数一次并多次加载它。宽度仍然为 0，并且由于控制台日志，0 一直显示，就像它陷入无限循环一样。

Answer 1

您应该使用load() 事件。

$(window).load(function(){
  // your code here
});

Answer 2

将 onload 事件附加到您的图像元素。

<img onload="someFunction()" ... >


function someFunction() {
    // image.reel part
}

Answer 3

不确定reel jquery 插件是什么（它是插件吗？）...但是下面的代码显示了真实的图像宽度和高度。

$(function(){
    var image=new Image();
    image.src='http://www.google.com/images/srpr/logo4w.png';

    image.onload=function(){
        console.log($(this).height());
        console.log($(this).width());
    };
    $('body').append(image);
});

我希望这会有所帮助。

Answer 4

使用image.onload = function () { //your code here } 应该可以工作，但我注意到在某些浏览器（即Chrome）中，如果浏览器缓存图像，onload 事件将不再触发。

更新：

经过一番研究，我发现this jQuery plugin 解决了浏览器缓存图像的问题。此外，它似乎是跨浏览器。试一试。