画像の読み込みがいつ終了したか知りたい。コールバックでそれを行う方法はありますか？
そうでない場合、それを行う方法はありますか？
回答:
.complete +コールバック
これは、追加の依存関係のない標準に準拠した方法であり、必要以上に長く待機しません。
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}img.complete通話と通話の間に画像が完成した場合、これはうまくいきaddEventListenerませんか？
loadイベントリスナーはelse句の中にある必要があります。そうでない場合は、2回呼び出す可能性があります（これは、イベントが発生したときにのみtrueになるように変更される可能性が比較的高いことに注意してください）火災）。img.completeloadloadedimg.complete
Image.onload（）はしばしば機能します。
これを使用するには、src属性を設定する前に、必ずイベントハンドラーをバインドする必要があります。
関連リンク：
使用例：
window.onload = function () {
var logo = document.getElementById('sologo');
logo.onload = function () {
alert ("The image has loaded!");
};
setTimeout(function(){
logo.src = 'https://edmullen.net/test/rc.jpg';
}, 5000);
}; <html>
<head>
<title>Image onload()</title>
</head>
<body>
<img src="#" alt="This image is going to load" id="sologo"/>
<script type="text/javascript">
</script>
</body>
</html>loadイベントは有効ではないと思われる原因は何ですか。html.spec.whatwg.org/multipage/webappapis.html#handler-onloadは、onload イベントハンドラーの定義です。
JavaScript画像クラスの.completeプロパティを使用できます。
動的に画面に追加される多数の画像オブジェクトを配列に格納するアプリケーションがあり、それらがロードされているときに、ページ上の別のdivに更新を書き込みます。ここにコードスニペットがあります：
var gAllImages = [];
function makeThumbDivs(thumbnailsBegin, thumbnailsEnd)
{
gAllImages = [];
for (var i = thumbnailsBegin; i < thumbnailsEnd; i++)
{
var theImage = new Image();
theImage.src = "thumbs/" + getFilename(globals.gAllPageGUIDs[i]);
gAllImages.push(theImage);
setTimeout('checkForAllImagesLoaded()', 5);
window.status="Creating thumbnail "+(i+1)+" of " + thumbnailsEnd;
// make a new div containing that image
makeASingleThumbDiv(globals.gAllPageGUIDs[i]);
}
}
function checkForAllImagesLoaded()
{
for (var i = 0; i < gAllImages.length; i++) {
if (!gAllImages[i].complete) {
var percentage = i * 100.0 / (gAllImages.length);
percentage = percentage.toFixed(0).toString() + ' %';
userMessagesController.setMessage("loading... " + percentage);
setTimeout('checkForAllImagesLoaded()', 20);
return;
}
}
userMessagesController.setMessage(globals.defaultTitle);
}jQueryでload（）-eventを使用することもできますが、画像がブラウザーのキャッシュから読み込まれる場合は常に起動するとは限りません。このプラグインhttps://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.jsを使用して、その問題を解決できます。
jqueryにとって寿命は短すぎます。
function waitForImageToLoad(imageElement){
return new Promise(resolve=>{imageElement.onload = resolve})
}
var myImage = document.getElementById('myImage');
var newImageSrc = "https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620"
myImage.src = newImageSrc;
waitForImageToLoad(myImage).then(()=>{
// Image have loaded.
console.log('Loaded lol')
});<img id="myImage" src="">srcwith JSを追加することで、混乱を招くだけです。
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620トリックを行います。
以下は同等のjQueryです。
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}質問があった2008年には適していませんが、最近はこれでうまくいきます。
async function newImageSrc(src) {
// Get a reference to the image in whatever way suits.
let image = document.getElementById('image-id');
// Update the source.
img.src = src;
// Wait for it to load.
await new Promise((resolve) => { image.onload = resolve; });
// Done!
console.log('image loaded! do something...');
}これらの関数は問題を解決します。DrawThumbnails関数を実装し、画像を保存するグローバル変数を用意する必要があります。私はこれを持っているクラスオブジェクトで動作させるのが大好きですThumbnailImageArrayメンバー変数として苦労しています！
と呼ばれる addThumbnailImages(10);
var ThumbnailImageArray = [];
function addThumbnailImages(MaxNumberOfImages)
{
var imgs = [];
for (var i=1; i<MaxNumberOfImages; i++)
{
imgs.push(i+".jpeg");
}
preloadimages(imgs).done(function (images){
var c=0;
for(var i=0; i<images.length; i++)
{
if(images[i].width >0)
{
if(c != i)
images[c] = images[i];
c++;
}
}
images.length = c;
DrawThumbnails();
});
}
function preloadimages(arr)
{
var loadedimages=0
var postaction=function(){}
var arr=(typeof arr!="object")? [arr] : arr
function imageloadpost()
{
loadedimages++;
if (loadedimages==arr.length)
{
postaction(ThumbnailImageArray); //call postaction and pass in newimages array as parameter
}
};
for (var i=0; i<arr.length; i++)
{
ThumbnailImageArray[i]=new Image();
ThumbnailImageArray[i].src=arr[i];
ThumbnailImageArray[i].onload=function(){ imageloadpost();};
ThumbnailImageArray[i].onerror=function(){ imageloadpost();};
}
//return blank object with done() method
//remember user defined callback functions to be called when images load
return { done:function(f){ postaction=f || postaction } };
}addThumbnailImages関数全体を含め、このコードのほとんどは無関係です。それを関連するコードまで下げて、-1を削除します。
ブラウザーが画像をレンダリングした後にimgのスタイルを設定することが目的の場合は、次のことを行う必要があります。
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});ブラウザが最初にloads the compressed version of image、次にdecodes it、最後にpaintsそれが。イベントがないのでpaint、ブラウザーdecodedにimgタグを付けた後でロジックを実行する必要があります。
React.jsを使用している場合は、次のようにすることができます。
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
どこ：