Question

我用谷歌地图举例，比我们放大谷歌地图发送地图的新图片，但我的项目中的问题是我使用缩放一次它是好的因为加载新图像，但我使用两个或更多缩放，例如，如果我快速缩放三次：我的浏览器制作队列首先下载第一个缩放图像，第二个下载第二个缩放图像，第三个下载第三个缩放图像，但我只需要下载第三个缩放图像。

也许有人可以建议尝试一些事情

加载图片脚本示例：

var imageURLs=[];  
imageURLs.push('https://developer.chrome.com/webstore/images/calendar.png');
imageURLs.push('http://www.w3schools.com/html/html5.gif');
imageURLs.push('http://www.linosartele.lt/wp-content/uploads/2014/08/images-9.jpg');

var imgs=[];
var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.src = imageURLs[i];
    }      
}

function start(){

    bgCtx.drawImage(imgs[0], 000,0, 100, 100);
    bgCtx.drawImage(imgs[1], 100,0, 100, 100);
    bgCtx.drawImage(imgs[2], 200,0, 100, 100);

}

Answer 1

您可以在放大缩放图像之前实现延迟，这样每次触发缩放命令时都不会下载。我不熟悉Google Maps API，因此请更改事件处理程序代码以匹配API。所以像这样：

var interval = 500;
var timeOut;
map.zoom(function(){
    clearTimeout(timeOut);
    timeOut = setTimeout(loadAllImages(callback), interval);
}

尝试间隔以查看最适合您的延迟。它越低，它就越容易被解雇，因为在这段时间内有人不会多次缩放的可能性越大。它最终可能是一个非常小的数字，可能是单个数字，具体取决于它们的缩放速度和浏览器注册缩放事件的速度。

JavaScript如何取消下载图像

1 个答案: