166

I want to know when an image has finished loading. Is there a way to do it with a callback?

If not, is there a way to do it at all?

4

10 に答える 10

187

.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')
  })
}

ソース: http://www.html5rocks.com/en/tutorials/es6/promises/

于 2014-06-13T08:48:11.587 に答える
82

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>

于 2008-11-11T05:19:46.893 に答える
21

Javascriptイメージクラスの.completeプロパティを使用できます。

多数のImageオブジェクトを配列に格納し、画面に動的に追加するアプリケーションがあります。それらが読み込まれると、ページ上の別の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);
}
于 2008-11-11T06:12:33.120 に答える
12

jQuery で load() イベントを使用することもできますが、画像がブラウザのキャッシュから読み込まれると、常に発生するとは限りません。このプラグインhttps://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.jsを使用して、この問題を解決できます。

于 2011-02-06T12:05:55.990 に答える
0

これらの関数は問題を解決します。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 } };
}
于 2012-10-24T16:43:41.190 に答える
-3

React.js を使用している場合は、次のようにすることができます。

render() {

// ...

<img 
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}

src={item.src} key={item.key}
ref={item.key} />

// ... }

どこ：

  • - onLoad (...) は次のように呼び出されます: { src: " https://......png ", key:"1" } これを「キー」として使用して、どの画像かを知ることができます正しくロードされていないもの。
  • - onError(...) 同じですが、エラーの場合です。
  • - オブジェクト "item" は { key:"..", src:".."} のようなもので、画像のリストで使用するために画像の URL とキーを格納するために使用できます。

    • 于 2018-05-28T15:30:52.570 に答える