jQuery / Javascript-在（文档）之前运行功能。准备好加载图像

Question

我试图获取图像的尺寸，以便调整其长度的画布的宽度（或宽度），使其宽度加倍。 （因此，对于400x800的图片，我需要800x800的画布）。 我现在想做的是将图像加载两次，一次确定图像的大小，再一次显示。 我的带有Javascript / JQuery的HTML看起来像

<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
</head>

<body>
    <canvas id="myCanvas" width="1100" height="500">
        </canvas>
    <script>

        $("<img />").attr("src", "test1image.jpg").load(function() {
            /* This is where I'd like to load the image to get its dimensions */
        });

        $(document).ready(
                function() {


                    var imgWidth, imgHeight;
                    var imageData; 

                    var image = new Image();
                    var canvas = document.getElementById("myCanvas");
                    var ctx = canvas.getContext("2d");

                    $(image).load(function() {
                        /* This is where the image is loaded and 
                           inserted into the canvas */
                        ctx.drawImage(image, 0, 0);
                    });
                    image.src = "test1image.jpg"; 

                    imageData = ctx.getImageData(0, 0,
                            image.width,
                            );

                    /* This is just part of the image manipulation, 
                       bland right now */
                    var newImgData = ctx.createImageData(imageData.width,
                            imageData.height);
                    for ( var i = 0; i < newImgData.data.length; i += 4) {
                        newImgData.data[i + 0] = 255;
                        newImgData.data[i + 1] = 0; 
                        newImgData.data[i + 2] = 0; 
                        newImgData.data[i + 3] = 255;       
                    }
                    ctx.putImageData(newImgData, imageData.width, 0);

                });
    </script>
</body>
</html>

我一直尝试但发现无法正常工作的一件事是尝试将函数放在（document）.ready之前，但是如果（document）.ready调用始终位于第一位。 我似乎无法在未创建画布的情况下加载图像（因为它位于（document）.ready调用中）。 谁能解释这是怎么回事？

谢谢。

Edit_1：我刚刚尝试添加

jQuery(window).load(function() {
            $("<img />").attr("src", "test1image.jpg").load(function() {
                imgWidth = this.width;
            });
        });

到脚本顶部，但是imgWidth在（document）.ready中被声明为未定义。

Edit_2：所以，实际上运行得很好。 这是新代码，并且100％可用。 新的画布大小恰好是我想要的，基于图像的大小，并且都可以使用...我唯一想的是嵌套功能太多，但是我将尝试自己解决。

<!DOCTYPE html>
<html>
<head>
<title>Canvas from scratch</title>
<meta charset="utf-8">

<script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jcanvas.min.js"></script>
</head>

<body>
    <canvas id="myCanvas" width="1100" height="500">
        </canvas>
    <script>
        $(document).ready(
                function() {
                    $("<img>").attr("src", "test1image.jpg").on('load', function() {
                        var imgWidth, imgHeight;
                        var imageData; 
                        var image = new Image();
                        var canvas = document.getElementById("myCanvas");
                        var ctx = canvas.getContext("2d");
                        ctx.canvas.width = this.width * 2;
                        ctx.canvas.height = this.height; 
                        $(image).on("load", function() {
                            /* This is where the image is loaded and 
                               inserted into the canvas */
                            ctx.drawImage(image, 0, 0);

                        });
                        image.src = "test1image.jpg"; 

                        imageData = ctx.getImageData(0, 0,
                                this.width,
                                this.height);

                        /* This is just part of the image manipulation, 
                           bland right now */
                        var newImgData = ctx.createImageData(imageData.width,
                                imageData.height);
                        for ( var i = 0; i < newImgData.data.length; i += 4) {
                            newImgData.data[i + 0] = 255;
                            newImgData.data[i + 1] = 0; 
                            newImgData.data[i + 2] = 0; 
                            newImgData.data[i + 3] = 255;       
                        }
                        ctx.putImageData(newImgData, imageData.width, 0);
                 });
                });
    </script>
</body>
</html>

Answer 1

这种语法：不建议使用.on('load'... .load() ，而应使用.on('load'...此外，这也不会延迟.ready函数的执行。这是您无法执行简单，愚蠢的原因的原因东西，而是在.on('load', handler)处理函数中放入该函数的回调？

$(document).ready(function() {
         $("<img>").attr("src", "test1image.jpg").on('load', function() {
                // do stuff with dimensions

                var imgWidth, imgHeight;
                var imageData; 
                // ... etc.

         });
});

Answer 2

您正在尝试将同步序列拖到异步模型上，基本上，您只是不想这样做。

文档就绪事件应该在加载其他资产之前触发： http : //api.jquery.com/ready/-请注意，它完全提到了您要询问的情况。

如果代码依赖于已加载的资产（例如，如果需要图像的尺寸），则应将代码放置在用于加载事件的处理程序中。

因此，您应该能够仅将代码更改为使用document.load()而不是document.ready()但这将等待所有资产加载完毕。 如果只想等待该特定图像加载，则应将代码从document.ready移至该图像的load事件。

编辑：

您的新代码基本上会执行最后一个选项-将代码移入图像的load事件，这可能是最好的总体选择，因为它允许您的代码在特定图像准备好后立即运行。 您可以通过在加载JS库等之前在嵌入式脚本中预加载图像来使图像更早实现，这将允许图像与其他资产并行开始下载，而不是等待文档就绪事件开始图像加载中。