Вашему вопросу уже несколько лет, но, возможно, это может помочь кому-то еще.Я не лучший эксперт, но я сделал это с HTML5 и его элементом canvas.
Я использовал EaselJS С его конструктором Bitmap вы можете использовать строку URI (URL)и библиотека автоматически будет управлять пассивной предварительной загрузкой (изображение не будет отображаться до полной загрузки)
Следующий закомментированный код может быть полезен для понимания того, что я говорю;)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8" />
<title>Retrieve images on client using EaselJS</title>
<script src="easeljs-0.4/lib/easel.js"></script>
<script>
// Root element wich displays the content of a display list in the target canvas.
var stage;
// Variable to assign a new Bitmap object
var img;
// Function to init the canvas
function init() {
// Stage constructor with the canvas id as a parameter
stage = new Stage(document.getElementById("cnvs_images"));
// Bitmap object with an URI parameter. This can be an URL or a path to the image (it can also be a video or another canvas)
// Example with an URL
var picture = "http://www.ndsicards.com/wp-content/uploads/Colors3D-1.jpg";
// You can also use a relative path to the server's images folder if this code resides in your webserver and the page it's being accessed by a client's browser)
/* var picture = "somepath/afolder/subfolder/itzaimage.jpg"; */
img = new Bitmap(picture);
//You can set the image a point of reference, if you plan to animate it for example.
/* img.regX = img.image.width * 0.5;
img.regY = img.image.height * 0.5; */
// You can scale the image if you need it. 1 it's like 1:1 size.
/*
img.scaleX = 0.3;
img.scaleY = 0.3;
*/
// The bitmap it's added to the stage to be able to be rendered.
stage.addChild(img);
//The frames per second if you plan to animate the image
/* Ticker.setFPS(60); */
// You'll need a Ticker Listener to be able to render it.
Ticker.addListener(window);
}
function tick() {
// Here you can set any animation code if needed as this simple example:
/* img.x += (stage.mouseX - img.x) * 0.1
img.y += (stage.mouseY - img.y) * 0.1 */
// This line must be at the end because it renders the
stage.update();
}
</script>
</head>
<!-- Don't forget the init funcion to be called onload -->
<body onload="init()">
<!-- And the canvas and it's id of course! -->
<canvas id="cnvs_images" width="800" height="600"></canvas>
</body>
</html>
Это рабочий пример, просто скопируйте и вставьте его.Также скачайте библиотеку EaselJS и обновите путь к ней в моем коде.Наконец, если вы хотите анимировать изображение, вы можете сделать это;просто раскомментируйте код, в котором я ссылаюсь на анимацию, и протестируйте его!
В синтезе вы можете использовать библиотеку EaselJS, как указано выше на стороне клиента, и использовать объект Bitmap, аргумент которого может быть URI илиURL.
Надеюсь, вы нашли это полезным;)