Самый быстрый способ запустить javascript после загрузки изображения?

У меня есть часть кода, которая зависит от знания ширины изображения на моей странице.Самый быстрый способ запустить javascript после загрузки изображения?

Если я немедленно уволить его (в верхней части $(function(){ иногда не работает, так как изображение еще не загрузилось.

Если я использую JQuery (я уже использую его для других вещей на страница), чтобы открыть огонь по нагрузке(), он никогда не срабатывает. Предположительно потому, что изображение загружается до JS даже выполняет, или потому, что он кэшируется.

$('#photo').load(function(){ 
    alert('loaded'); 
}); 
//doesn't fire

Если я делаю следующее, он работает, но после того, как заметная задержка, когда он извлекает изображение во второй раз:

$('#photo').load(function(){ 
    alert('loaded'); 
}); 
$('#photo').attr('src',$('#photo').attr('src')+'?'+new Date().getTime()); 
//fires, but is slow

Наверняка в 2016 году должен быть хороший способ сделать это? Либо в jquery, либо в vanilla JS.

источник

2016-02-24 Codemonkey

, пожалуйста, предоставьте [mcve] –

что делать, если вы дождались полной загрузки DOM с помощью функции готовности документа? (https://api.jquery.com/ready/) – DTH

Или если вы хотите сделать это, как только изображение загрузится, см. предыдущую публикацию SO (http://stackoverflow.com/questions/3877027/jquery-callback- on-image-load-even-when-the-image-is-cache) – DTH

Почему бы просто не использовать функцию OnLoad изображения:

<img src="/path/to/image.jpg" onload="doStuff(this);" />

Это вызовет после загрузки изображения ..

источник

2016-02-24 12:05:31 DTH

Ужасно, как есть, я думаю, что это лучшее решение! – Codemonkey

да .. иногда можно ослепить jquery, даже не думая о старых добрых решениях :) – DTH

Не jquery, так как избегайте иметь JS прямо в моем html. – Codemonkey

Вы можете использовать плагин Unveil, чтобы вызвать обратный вызов после загрузки изображения. В качестве бонуса вы также получите ленивую загрузку!

$("img").unveil(200, function() { 
    $(this).load(function() { 
    // where you do your things... this = the image object 
    }); 
});

источник

2016-02-24 12:04:02 kuzyn

Дополнительный код редко является хорошим решением проблемы, imho. Спасибо за предложение. – Codemonkey

Я использую следующие:

$('<img />').one('load', function() { 
    // do stuff 
}).attr('src', $('#photo').src);

Создайте тег, приложите к нему однократный обработчик нагрузки и только потом скажите ему, что такое URL-адрес src.

Другой подход:

$('#photo').on("load",function(){ 
    // do stuff 
}).each(function(){ 
    if(this.complete) { 
    $(this).trigger('load'); 
    } 
});

Идея заключается в том, что сцепление гарантирует, что если фотография находится в кэше и обработчик OnLoad прилагается слишком поздно, чтобы поймать его, каждый (this.complete) раздел сохранит этот день и запустит загрузку.

Соответствует ли это вашим определениям быстро?

источник

2016-03-29 22:32:04

Самый быстрый способ запустить javascript после загрузки изображения?

ответ

Смежные вопросы