画像の読み込みに時間がかかりすぎると、画像をスワップする条件を設定してください。

Question

画像の読み込みに2秒以上かかる場合は条件を作成し、別の画像と交換してください。今、私は.on('error')画像のURLをチェックする機能があります。URLが悪い場合は、その画像を交換してください。しかし、画像の読み込みに時間がかかり過ぎるとどうなりますか？特定の画像に2秒以上かかる場合に使用できるコールバックがありますか？

 $('img').on('load', function() { 
      //do things here 
    }) 
     .on('error', function() { 
     $(this).parent().css('background-image', 'url("/broken-image")'); 
     $(this).parent().addClass('img-not-found'); 
     }) 
     .each(function() { 
     if(this.complete) { 
      console.log('completed here'); 
     }else { 
     $(this).parent().css('background-image', 'url("/broken-image")'); 
     $(this).parent().addClass('img-not-found'); 
     } 
    }); 

Answer 1

あなたはそれを動作させることができます - 画像が実際にロードが行われていることを決定するために、画像のonload機能を使用して：

var imageElement = document.getElementById("myImage"); 
var isImageLoaded = false; 

imageElement.onload = function() { 
    isImageLoaded = true; 
} 

setTimeout(function() { 
    if (isImageLoaded === false) { 
     //2 seconds passed, no dice on the image! 
    } 
}, 2000);