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庫等之前在嵌入式腳本中預加載圖像來使圖像更早實現，這將允許圖像與其他資產並行開始下載，而不是等待文檔就緒事件開始圖像加載中。

jQuery / Javascript-在（文檔）之前運行功能。准備好加載圖像

問題描述

2 個解決方案

解決方案1
0 已采納 2014-07-15 09:20:53

解決方案2
0 2014-07-15 09:37:33

jQuery / Javascript-在（文檔）之前運行功能。准備好加載圖像

問題描述

2 個解決方案

解決方案1 0 已采納 2014-07-15 09:20:53

解決方案2 0 2014-07-15 09:37:33

解決方案1
0 已采納 2014-07-15 09:20:53

解決方案2
0 2014-07-15 09:37:33