How to load an other image, if the current image loads slow?

Question

I'm working on a HTML5 canvas game, and I want to load a high resolution image as background. This image is 10MB, so if the image loads slow, then I want to load a smaller image instead.

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

should I cancel somehow the loading, or it's cancelled if I edit the src attribute?

check http://stackoverflow.com/questions/930237/javascript-cancel-stop-image-requests — Hacker Wins, Jul 26 '12 at 15:33

score 1 · Accepted Answer · answered Jul 27 '12 at 09:50

One alternative "solution" would be to load the low-res image first. Only if it loaded quickly enough you start to load the high-res version to replace it.

There are three possible benefits as I see it:

You avoid having to worry about cancelling the load :-)
You avoid loading unnecessary data (the partially downloaded high-res image) when the user is on low bandwidth, but instead load unnecessary data (the complete low-res image) when the user is on high bandwidth (in which case it doesn't matter that much anyway).
While you load the high-res image, you have the option to show the low-res image as a placeholder (requires that you load the low-res and high-res images into two separarate DOM Image objects and swap out the low-res with the high-res).

score 0 · Answer 2 · edited May 23 '17 at 11:48

You can't stop the loading of images, however it is possible to cancel an ordinary AJAX request (see this solution on SO). Usually images aren't loaded via AJAX for good reasons, but you can work around this by sending the image as a base64 encoded string. So you let PHP read the image and convert it to base64. This string can be sent to JS via AJAX and "directly" drawn to your canvas (solution on SO).

I really don't know if this is the best way to do this... Anyways, see if this works for you:

HTML:

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

JavaScript: (using 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)

(This uses part of a 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;
?>

How to load an other image, if the current image loads slow?

2 Answers2