如何加载其他图像，如果当前图像加载速度慢？

我正在研究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属性？

来源

2012-07-26 eqiproo

检查http://stackoverflow.com/questions/930237/javascript-cancel-stop-image-requests – 2012-07-26 15:33:38

我不能使用window.stop，因为我加载了更多的对象异步。 – eqiproo 2012-07-26 15:51:02

坏消息〜我会找到另一个〜 – 2012-07-26 15:55:44

一种替代 “溶液” 是首先加载低分辨率图像。只有当它加载速度足够快时，才能开始加载高分辨率版本来替换它。

有三种可能的好处，因为我看到它：

，您就不必担心取消你避免加载不必要的数据（部分下载的高分辨率图像）:-)
负载时用户使用的是低带宽，但当用户处于高带宽时（在这种情况下，无论如何，这并不重要），而是加载不必要的数据（完整的低分辨率图像）。
加载高分辨率图像时，您可以选择将低分辨率图像显示为占位符（要求您将低分辨率和高分辨率图像加载到两个分离的DOM图像对象中，并换出低分辨率的高分辨率）。

来源

2012-07-27 09:50:35 Strille

您无法停止加载图像，但可以取消普通的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; 
?>

来源

2012-07-26 22:52:25 Aletheios

如何加载其他图像，如果当前图像加载速度慢？

回答

相关问题