JavaScript: Знайте, когда изображение будет полностью загружено
Нет никакой проблемы с Вашим кодом, это просто, что тег абзаца или тег Div не могут получить фокус . Фокус может только быть дан вещам, можно взаимодействовать с, такие как ссылки, ввести элементы, текстовые области, и т.д.
Для прокрутки окна к этому недавно добавленному элементу, можно использовать плагин такой в качестве ScrollTo.
На ноте стороны, Ваш код мог быть упрощен немного:
var html = "New paragraph
";
$("#content").append(html);
$("#newP p").focus();
var html = "New paragraph
";
$(html)
.appendTo('#content')
.focus() // or scrollTo(), now...
;
6 ответов
Конечно. Помните, что нагрузка должна быть добавлена перед атрибутом src.
$('<img />').load( function(){
console.log('loaded');
}).attr('src', imgUrl);
Если вы определили тег изображения в разметке, то вы застряли, когда срабатывает событие загрузки окна, чтобы быть уверенным, что изображение передано по сети.
$('img.beacon').load()
Не всегда будет работать правильно, обычно я делаю это:
$.fn.imageLoad = function(fn){
this.load(fn);
this.each( function() {
if ( this.complete && this.naturalWidth !== 0 ) {
$(this).trigger('load');
}
});
}
Приведенный выше код также охватывает случаи, когда изображение завершает загрузку до выполнения сценария. Это может произойти, когда вы определяете изображение в разметке.
Используйте это так:
<img src='http://example.com/image.png' class='beacon' />
<script type='text/javascript'>
$(document).ready(function(){ //document.ready not really necessary in this case
$('img.beacon').imageLoad(function(){
//do stuff
});
});
</script>
<script type="text/javascript">
$().ready(function() {
$('img#beacon').attr('src', 'http://sstatic.net/so/img/so/logo.png')
.load(function() { alert('Image Loaded'); })
.error(function() { alert('Error Loading Image'); });
});
</script>
Это загрузит Stackoverflow логотип.
В случае успешной загрузки предупреждение («Изображение загружено»); выполняется
, если это не удается, предупреждение («Ошибка загрузки изображения»); выполняется
, конечно, любая из них может быть заменена вашими собственными функциями.
Как новый пользователь, он отказался от моего тега изображения; но тег изображения должен содержать только атрибут id = 'beacon'; если вы не хотите добавить класс. Здесь мы устанавливаем атрибут src в коде, обычно изображения, которые вы отслеживаете для завершения, имеют значения src, которые в любом случае устанавливаются программно.
Другой вариант, если он вам подходит: событие onload происходит сразу после загрузки страницы или изображения.
Например:
<img ... onload="alert('test');" />
Вот простой код javascript, который работает во всех браузерах:
var myImage = new Image();
myImage.onload = function() {
var image_width = myImage.width;
var image_height = myImage.height;
$('#pictureEl').html('<img width="'+ image_width +'" height="'+ image_height +'" src='+ myImage.src + '></img>');
};
myImage.src = myUrl;
Фрагмент jQuery должен делать то же самое под капотом.
Вы можете использовать событие onload , которое срабатывает после завершения загрузки всей страницы.
$(window).load(function(){
//everything is loaded
});