2

私は HTML5 キャンバス ゲームに取り組んでおり、背景として高解像度の画像を読み込みたいと考えています。この画像は 10MB であるため、画像の読み込みが遅い場合は、代わりに小さい画像を読み込みます。

var myimg = new Image();
myimg.onload = function() {
  clearTimeout(t);
  alert('high resolution image loaded');
};
mximg.src = 'path/to/highres.png';

var t = setTimeout(function(){
  //cancel loading somehow ?
  myimg.onload = function() {
    alert('low resolution image loaded');
  };
  myimg.src = 'path/to/low_res.png';
},5000);

どうにかロードをキャンセルした方がいいですか、それとも src 属性を編集するとキャンセルされますか?

4

2 に答える 2

1

別の「解決策」の 1 つは、最初に低解像度の画像を読み込むことです。それが十分に速くロードされた場合にのみ、高解像度バージョンのロードを開始してそれを置き換えます.

私が考えるメリットは3つあります。

  1. ロードのキャンセルについて心配する必要がなくなります:-)
  2. ユーザーが低帯域幅を使用している場合は不要なデータ (部分的にダウンロードされた高解像度画像) をロードすることを避けますが、代わりに、ユーザーが高帯域幅を使用している場合は不要なデータ (完全な低解像度画像) をロードします (この場合はそうではありません)。とにかくそれくらい重要です）。
  3. 高解像度画像を読み込んでいる間、低解像度画像をプレースホルダーとして表示するオプションがあります (低解像度画像と高解像度画像を 2 つの別個の DOM Image オブジェクトに読み込み、低解像度画像を交換する必要があります)。ハイレゾ対応）。
于 2012-07-27T09:50:35.440 に答える
0

画像の読み込みを停止することはできませんが、通常の AJAX リクエストをキャンセルすることは可能です ( SO のこのソリューションを参照してください)。通常、画像は正当な理由で AJAX 経由では読み込まれませんが、画像を base64 でエンコードされた文字列として送信することでこれを回避できます。したがって、PHP にイメージを読み取らせて、base64 に変換させます。この文字列は、AJAX を介して JS に送信し、キャンバスに「直接」描画できます ( SO のソリューション)。

これがこれを行うための最良の方法であるかどうかは本当にわかりません...とにかく、これがうまくいくかどうかを確認してください：

HTML:

<canvas id="background" width="800" height="600"></canvas>


JavaScript: (jQuery を使用)

function drawBackgroundImage(src) {
    var image = $("<img/>").load(function(){
        $("canvas#background")[0].getContext("2d").drawImage(image[0], 0, 0);
    }).attr("src", src);
}
function loadImage(highres, lowres) {
    var t;
    var xhr = $.ajax({
        type: "POST",
        url: "load_image.php",
        data: "image=" + highres,
        success: function(imgbinary){
            if (imgbinary != "") {
                clearTimeout(t);
                drawBackgroundImage(imgbinary);
            }
        }
    });
    t = setTimeout(function(){
        xhr.abort();
        drawBackgroundImage(lowres);
    }, 5000);
}

loadImage("path/to/highres.png", "path/to/low_res.png");


PHP: (load_image.php)

(これはPHP マニュアルの関数の一部を使用します。)

<?php
    $result = "";
    @ob_start();
    if (isset($_POST["image"])) {
        $filename = $_POST["image"];
        if (file_exists($filename)) {
            $filetype = pathinfo($filename, PATHINFO_EXTENSION);
            $imgbinary = fread(fopen($filename, "r"), filesize($filename));
            $result = "data:image/".$filetype.";base64,".base64_encode($imgbinary);
        }
    }
    @ob_end_clean();
    echo $result;
?>
于 2012-07-26T22:52:25.203 に答える