JavaScript：画像や資産がブラウザに保存されていて、インターネットからダウンロードされていないかどうかを確認する方法

Question

JavaScriptを使って画像をロードしています。

しかし、問題は、ブラウザ上に既にクライアントに保存されている場合、再生したくないということです。どうして？かなり複数の画像が即座にロードされ、同時にアニメーション化されるので、実際には邪魔になります。

資産（画像）が既にダウンロード/保存されているかどうかを検出するか、資産を更新する必要があるかどうかを検出して解決します。これは私が立ち往生したところです。

例：

CSS：

.AnimatedImage{ 
    width: 100%; 
    max-width: 0px; 
    transition: max-width 0.2s; 
    transition-timing-function: cubic-bezier(0.68, 0.12, 0.32, 0.85); 
} 

はJavaScript：

image.onload=function(){ 
    if(imageClientStored(this)){ 
     this.style.transition=""; 
     this.style.max-width="100%"; 
    } 
    else this.style.max-width="100%"; 
} 
image.src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"; 

function imageClientStored(image){ 
    ?????????? 
} 

は多分キーまたはそのような何かのようにURLをソート保存された資産を持つマップはありますか？

Answer 1

外部ソースからのものである場合は、ダウンロードに時間がかかるはずです。負荷時間を確認するにはチェックし、時間がかかりすぎる場合は、ローカルではない可能性が最も高いです。

ここでは仕事でそれを見ることができます。このスニペットを初めて実行するときは、「キャッシュから」と言うべき2回目の「ウェブから」と言わなければなりません。

//expects 
 
//string url 
 
//function local (for callback) 
 
//function download (for callback) 
 
function loadImage(url,local,download){ 
 
    var img = new Image(); 
 
    var start = new Date(); 
 
    img.onload = function(){ 
 
    if((new Date)-start > 25){//25ms elapsed 
 
     download.call(img);//binds this to img in download callback 
 
    }else{ 
 
     local.call(img);//binds this to img in local callback 
 
    } 
 
    }; 
 
    img.src = url; 
 
    return img; 
 
} 
 
    
 
var testImg = loadImage(
 
    "https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150", 
 
    function(){ console.log('from cache'); }, 
 
    function(){ console.log('from web'); } 
 
);