如果当前图像加载缓慢,如何加载其他图像
How to load an other image, if the current image loads slow?
我正在开发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属性时取消加载?
另一种"解决方案"是先加载低分辨率图像。只有当它加载得足够快时,你才能开始加载高分辨率版本来替换它。
在我看来,有三个可能的好处:
- 您不必担心取消加载:-)
- 当用户处于低带宽时,您可以避免加载不必要的数据(部分下载的高分辨率图像),但当用户处于高带宽时(在这种情况下,这无关紧要),您可以加载不需要的数据(完整的低分辨率图像)
- 加载高分辨率图像时,可以选择将低分辨率图像显示为占位符(要求将低分辨率和高分辨率图像加载到两个单独的DOM图像对象中,并用高分辨率替换低分辨率图像)
您不能停止加载图像,但是可以取消普通的AJAX请求(请参阅SO上的此解决方案)。通常情况下,图像不通过AJAX加载是有充分理由的,但您可以通过将图像作为base64编码的字符串发送来解决这个问题。因此,让PHP读取图像并将其转换为base64。这个字符串可以通过AJAX发送到JS,并"直接"绘制到画布上(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)
(这使用了PHP手册中的一个函数的一部分。)
<?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;
?>
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像