Quero saber quando uma imagem terminou de carregar. Existe uma maneira de fazer isso com um retorno de chamada?
Caso contrário, existe alguma maneira de fazer isso?
Quero saber quando uma imagem terminou de carregar. Existe uma maneira de fazer isso com um retorno de chamada?
Caso contrário, existe alguma maneira de fazer isso?
Respostas:
.complete
+ retorno de chamada
Este é um método compatível com os padrões, sem dependências extras e não espera mais que o necessário:
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
ligação e a addEventListener
ligação?
load
ouvinte de evento deve estar em uma else
cláusula, como img.complete
pode se tornar realidade antes do load
evento ser disparado, portanto, se não fosse, você poderia ter loaded
chamado duas vezes (observe que é relativamente provável que isso mude, de forma que img.complete
só se torna verdadeira quando o evento incêndios).
Image.onload () geralmente funciona.
Para usá-lo, será necessário vincular o manipulador de eventos antes de definir o atributo src.
Links Relacionados:
Exemplo de uso:
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
evento não é válido? html.spec.whatwg.org/multipage/webappapis.html#handler-onload é a definição do onload
manipulador de eventos.
Você pode usar a propriedade .complete da classe de imagem Javascript.
Eu tenho um aplicativo no qual armazeno vários objetos de imagem em uma matriz, que serão adicionados dinamicamente à tela e, enquanto eles carregam, escrevo atualizações para outra div na página. Aqui está um trecho de código:
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);
}
Você pode usar o evento load () - no jQuery, mas ele nem sempre será acionado se a imagem for carregada do cache do navegador. Este plug-in https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js pode ser usado para solucionar esse problema.
A vida é muito curta para o 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="">
src
JS.
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620
faz o truque.
Aqui está o equivalente jQuery:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}
Não é adequado para 2008 quando a pergunta foi feita, mas hoje em dia isso funciona bem para mim:
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...');
}
essas funções resolverão o problema, você precisará implementar a DrawThumbnails
função e ter uma variável global para armazenar as imagens. Adoro fazer isso funcionar com um objeto de classe que possui a ThumbnailImageArray
variável como membro, mas estou com dificuldades!
chamado como em 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
função. Analise o código relevante e removerei o -1.
Se o objetivo é estilizar o img depois que o navegador renderizar a imagem, você deverá:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});
porque o navegador primeiro loads the compressed version of image
, depois decodes it
, finalmente paints
. como não há evento, paint
você deve executar sua lógica após o navegador ter decoded
a tag img.
Se você estiver usando o React.js, poderá fazer o seguinte:
render() {
// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />
// ...}
Onde: