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属性会取消加载？

您不能停止图像加载，但是可以取消普通AJAX请求（）。通常情况下，图像不是通过AJAX加载的，但您可以通过将图像作为base64编码字符串发送来解决这一问题。因此，让PHP读取图像并将其转换为base64。该字符串可以通过AJAX发送到JS，并“直接”绘制到画布（）

我真的不知道这是不是最好的方法。。。不管怎样，看看这是否适合你：

HTML:

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

JavaScript:（使用jQuery）

功能缺陷背景图像（src）{
变量图像=$（“


PHP:（load_image.PHP）

（这将使用一个部分。）


另一种“解决方案”是先加载低分辨率图像。只有在加载速度足够快的情况下，您才开始加载高分辨率版本以替换它

在我看来，有三个可能的好处：

您不必担心取消加载：-）
当用户处于低带宽时，可以避免加载不必要的数据（部分下载的高分辨率图像），但当用户处于高带宽时，可以加载不必要的数据（完整的低分辨率图像）（在这种情况下，这并不重要）
加载高分辨率图像时，可以选择将低分辨率图像显示为占位符（要求将低分辨率图像和高分辨率图像加载到两个单独的DOM图像对象中，并将低分辨率图像与高分辨率图像交换）
检查我无法使用window.stop，因为我异步加载了更多对象。坏消息~我会找到另一个对象~
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
    $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;
?>