如果当前图像加载速度慢,如何加载其他图像?

时间:2012-07-26 15:13:09

标签: javascript

我正在开发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属性它会被取消吗?

2 个答案:

答案 0 :(得分:1)

一种替代“解决方案”是首先加载低分辨率图像。只有加载得足够快,才能开始加载高分辨率版本来替换它。

我认为有三种可能的好处:

  1. 您可以避免担心取消负载: - )
  2. 当用户处于低带宽时,您可以避免加载不必要的数据(部分下载的高分辨率图像),而是在用户处于高带宽时加载不必要的数据(完整的低分辨率图像)(在这种情况下,无论如何都无关紧要。)
  3. 在加载高分辨率图像时,您可以选择将低分辨率图像显示为占位符(要求您将低分辨率和高分辨率图像加载到两个单独的DOM图像对象中并换出低分辨率的高分辨率。)

答案 1 :(得分:0)

您无法停止加载图像,但可以取消普通的AJAX请求(see this solution on SO)。通常,图像不会通过AJAX加载,原因很多,但您可以通过将图像作为base64编码的字符串发送来解决此问题。所以你让PHP读取图像并将其转换为base64。这个字符串可以通过AJAX发送给JS并“直接”绘制到你的画布上(solution on 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)

(这使用了function from the PHP manual的一部分。)

<?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;
?>