知道何时加载图像的Javascriptcallback
我想知道一个图像何时完成加载。 有没有办法做到这一点与callback？
如果没有，是否有办法做到这一点？
.complete + callback是符合标准的，没有图书馆的方式。 这不等于必要：
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属性之前绑定事件处理程序。
相关链接：
- Mozilla on Image.onload（）
用法示例：
<html> <head> <title>Image onload()</title> </head> <body> <img src="#" alt="This image is going to load" id="sologo"/> <script type="text/javascript"> window.onload = function () { var logo = document.getElementById('sologo'); logo.onload = function () { alert ("The image has loaded!"); }; setTimeout(function(){ logo.src = 'http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png'; }, 5000); }; </script> </body> </html>
您可以使用Javascript图像类的.complete属性。
我有一个应用程序，我在数组中存储了大量的图像对象，这将被dynamic地添加到屏幕，并且当他们正在加载我写更新到页面上的另一个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（） – 事件，但如果图像是从浏览器caching中加载的，则不会始终触发。 这个插件https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js可以用来解决这个问题。;
这些函数将解决这个问题，你需要实现DrawThumbnails函数，并有一个全局variables来存储图像。 我喜欢得到这个与ThumbnailImageArray作为一个成员variables的类对象，但我挣扎！
称为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 } }; }
这里是jQuery的等价物：
var $img = $('img'); if ($img.length > 0 && !$img.get(0).complete) { $img.on('load', triggerAction); } function triggerAction() { alert('img has been loaded'); }
