如何创建一个JavaScript回调来知道何时加载图像?

2020/11/19 03:22 · javascript ·  · 0评论

我想知道图像何时完成加载。有办法做到这一点的回调吗?

如果没有,有没有办法做到这一点?

.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/

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>

您可以使用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);
}

您可以在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="">

这等效于jQuery:

var $img = $('img');

if ($img.length > 0 && !$img.get(0).complete) {
   $img.on('load', triggerAction);
}

function triggerAction() {
   alert('img has been loaded');
}

如果目标是在浏览器渲染图像后为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您应该在浏览器具有decodedimg标签之后运行逻辑

提出问题时不适合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 } };
}

如果您使用的是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”}您可以将其用作“ key”以了解哪些图像已正确加载,哪些未正确加载。
  • -onError(...)相同,但有错误。
  • -对象“ item”是这样的{key:“ ..”,src:“ ..”}},您可以使用它存储图像的URL和密钥,以便在图像列表中使用。

  • 本文地址:http://javascript.askforanswer.com/ruhechuangjianyigejavascripthuidiaolaizhidaoheshijiazaituxiang.html
    文章标签: ,   ,   ,  
    版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

    文件下载

    老薛主机终身7折优惠码boke112

    上一篇:
    下一篇:

    评论已关闭!