Я хочу знать, когда изображение закончило загрузку. Есть ли способ сделать это с помощью обратного вызова?
Если нет, есть ли способ сделать это вообще?
Ответы:
.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.
У меня есть приложение, в котором я храню несколько объектов 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);
}Вы можете использовать событие 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.
Если цель состоит в том, чтобы стилизовать 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вас нет события, вы должны запустить свою логику после того, как в браузере есть decodedтег img.
Если вы используете React.js, вы можете сделать это:
render() {// ...
<img
onLoad={() => this.onImgLoad({ item })}
onError={() => this.onImgLoad({ item })}
src={item.src} key={item.key}
ref={item.key} />// ...}
Куда: