Я хочу знати, коли зображення закінчується завантаженням. Чи є спосіб зробити це з зворотним дзвінком?
Якщо ні, чи є спосіб це зробити взагалі?
Відповіді:
.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/
img.completeвикликом та addEventListenerдзвінком?
loadслухач події повинні бути в elseреченні, так як img.completeможе стати реальністю до того , як loadподія викликається, отже , якби не ви могли б потенційно бути loadedвикликаний двічі (зверніть увагу , що це відносно , ймовірно, зміниться таким чином, що img.completeтільки стає справжнім , коли подія пожежі).
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>loadподія недійсна? html.spec.whatwg.org/multipage/webappapis.html#handler-onload - це визначення onload обробника події.
Ви можете використовувати властивість .complete класу зображень Javascript.
У мене є додаток, в якому я зберігаю ряд об’єктів Зображення в масиві, який буде динамічно додаватися на екран, і коли вони завантажуються, я записую оновлення до іншого діла на сторінці. Ось фрагмент коду:
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);
}
Ви можете використовувати load () - подія в jQuery, але воно не завжди запускається, якщо зображення завантажується з кешу браузера. Цей плагін 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="">srcJS.
myImage.src = https://pmchollywoodlife.files.wordpress.com/2011/12/justin-bieber-bio-photo1.jpg?w=620робить трюк.
Ось еквівалент jQuery:
var $img = $('img');
if ($img.length > 0 && !$img.get(0).complete) {
$img.on('load', triggerAction);
}
function triggerAction() {
alert('img has been loaded');
}
Не підходить для 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 } };
}
addThumbnailImagesфункцію. Створіть її відповідно до коду, і я видалю -1.
Якщо мета - стилізувати зображення після того, як браузер надає зображення, вам слід:
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ви повинні запустити свою логіку після того, як браузер має decodedтег img.
Якщо ви використовуєте React.js, ви можете зробити це:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Де: