Chcę wiedzieć, kiedy obraz się załadował. Czy można to zrobić za pomocą oddzwonienia?
Jeśli nie, to czy w ogóle jest na to sposób?
Odpowiedzi:
.complete + oddzwonienie
Jest to metoda zgodna ze standardami bez dodatkowych zależności i czeka nie dłużej niż to konieczne:
var img = document.querySelector('img')
function loaded() {
alert('loaded')
}
if (img.complete) {
loaded()
} else {
img.addEventListener('load', loaded)
img.addEventListener('error', function() {
alert('error')
})
}
Źródło: http://www.html5rocks.com/en/tutorials/es6/promises/
img.completewywołaniem a addEventListenerwywołaniem?
loaddetektor zdarzenia musi znajdować się w elseklauzuli, co img.completemoże stać się prawdą zanim loadzdarzenie zostanie uruchomione , więc gdyby tak nie było, mógłbyś potencjalnie loadedzadzwonić dwukrotnie (zauważ, że jest to stosunkowo prawdopodobne, że zmieni się tak, że stanie img.completesię prawdą tylko wtedy, gdy zdarzenie pożary).
Image.onload () często działa.
Aby go użyć, musisz upewnić się, że powiązałeś program obsługi zdarzeń przed ustawieniem atrybutu src.
Powiązane linki:
Przykładowe zastosowanie:
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>loadwydarzenie jest nieważne? html.spec.whatwg.org/multipage/webappapis.html#handler-onload to definicja modułu onload obsługi zdarzeń.
Możesz użyć właściwości .complete klasy obrazu Javascript.
Mam aplikację, w której przechowuję wiele obiektów Image w tablicy, która będzie dynamicznie dodawana do ekranu, a gdy się ładują, piszę aktualizacje do innego div na stronie. Oto fragment kodu:
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);
}
Możesz użyć zdarzenia load () - w jQuery, ale nie zawsze będzie ono uruchamiane, jeśli obraz zostanie załadowany z pamięci podręcznej przeglądarki. Ta wtyczka https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js może zostać użyta do rozwiązania tego problemu.
Życie jest za krótkie dla 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="">srcpomocą JS.
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620Zrób sztuczkę.
Oto odpowiednik jQuery:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}Nie nadaje się na rok 2008, kiedy zadano pytanie, ale obecnie działa to dobrze:
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...');
}te funkcje rozwiążą problem, musisz zaimplementować DrawThumbnailsfunkcję i mieć zmienną globalną do przechowywania obrazów. Uwielbiam to, aby działało z obiektem klasy, który ma ThumbnailImageArrayzmienną składową, ale mam problemy!
zadzwonił jak w 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 } };
}addThumbnailImagesfunkcja. Zmniejsz to do odpowiedniego kodu, a usunę -1.
Jeśli celem jest nadanie stylu img po wyrenderowaniu obrazu przez przeglądarkę, należy:
const img = new Image();
img.src = 'path/to/img.jpg';
img.decode().then(() => {
/* set styles */
/* add img to DOM */
});ponieważ najpierw przeglądarka loads the compressed version of image, potem na decodes itkońcu paints. ponieważ nie ma zdarzenia, dla paintktórego należy uruchomić logikę po tym, jak przeglądarka ma decodedtag img.
Jeśli używasz React.js, możesz to zrobić:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Gdzie: