Независимый от браузера способ обнаружить, когда изображение было загружено
Я думаю, что ваша ошибка может быть связана с _id, который вы используете. Вы видите, что это выражение , которое указывает, какое поле вы будете использовать для группировки.
Путь к полю и системные переменные : выражения агрегации используют путь к полю для доступа к полям во входных документах. Чтобы указать путь к полю, используйте строку с префиксом со знаком доллара $ имя поля или пунктирное имя поля, если поле находится во встроенном документе. Например, «$ user» для указания пути к полю для пользователя или «$ user.name» для указания пути к полю «user.name».
«$» эквивалентно «$$ CURRENT». где CURRENT - системная переменная, которая по умолчанию имеет корень текущего объекта на большинстве этапов, если не указано иное на определенных этапах. ТЕКУЩИЙ может быть отскок.
blockquote>Для того, чтобы заставить ваш запрос работать, вам нужно сослаться на
[110]$, например.Я думаю, что ваша ошибка может быть связана с [111], который вы используете. Вы видите, что это выражение , которое указывает, какое поле вы будете использовать для группировки.
Путь к полю и системные переменные : выражения агрегации используют путь к полю для доступа к полям во входных документах. Чтобы указать путь к полю, используйте строку с префиксом со знаком доллара $ имя поля или пунктирное имя поля, если поле находится во встроенном документе. Например, «$ user» для указания пути к полю для пользователя или «$ user.name» для указания пути к полю «user.name».
«$» эквивалентно «$$ CURRENT». где CURRENT - системная переменная, которая по умолчанию имеет корень текущего объекта на большинстве этапов, если не указано иное на определенных этапах. ТЕКУЩИЙ может быть отскок.
blockquote>Для того, чтобы заставить ваш запрос работать, вам нужно сослаться на [112], например [113].
iddb.stocks.aggregate([ {$unwind: '$tickers'}, {"$sort": {"_id": 1, "tickers.open": -1}}, {"$group": { "_id": "Я думаю, что ваша ошибка может быть связана с
_id, который вы используете. Вы видите, что это выражение , которое указывает, какое поле вы будете использовать для группировки.Путь к полю и системные переменные : выражения агрегации используют путь к полю для доступа к полям во входных документах. Чтобы указать путь к полю, используйте строку с префиксом со знаком доллара $ имя поля или пунктирное имя поля, если поле находится во встроенном документе. Например, «$ user» для указания пути к полю для пользователя или «$ user.name» для указания пути к полю «user.name».
«$» эквивалентно «$$ CURRENT». где CURRENT - системная переменная, которая по умолчанию имеет корень текущего объекта на большинстве этапов, если не указано иное на определенных этапах. ТЕКУЩИЙ может быть отскок.
blockquote>Для того, чтобы заставить ваш запрос работать, вам нужно сослаться на
[110] id", "ticker": { "$first": "$tickers.ticker"}, "open": { "$first": "$tickers.open" }, "close": { "$first": "$tickers.close" } }} ]);$, например.Я думаю, что ваша ошибка может быть связана с [111], который вы используете. Вы видите, что это выражение , которое указывает, какое поле вы будете использовать для группировки.
Путь к полю и системные переменные : выражения агрегации используют путь к полю для доступа к полям во входных документах. Чтобы указать путь к полю, используйте строку с префиксом со знаком доллара $ имя поля или пунктирное имя поля, если поле находится во встроенном документе. Например, «$ user» для указания пути к полю для пользователя или «$ user.name» для указания пути к полю «user.name».
«$» эквивалентно «$$ CURRENT». где CURRENT - системная переменная, которая по умолчанию имеет корень текущего объекта на большинстве этапов, если не указано иное на определенных этапах. ТЕКУЩИЙ может быть отскок.
blockquote>Для того, чтобы заставить ваш запрос работать, вам нужно сослаться на [112], например [113].
[110] id
7 ответов
ПРИМЕЧАНИЕ: Я написал это в 2010 году, браузерами в природе были IE 8/9 beta, Firefox 3.x и Chrome 4.x. Пожалуйста, используйте это только в исследовательских целях, я сомневаюсь, что вы сможете скопировать/вставить это в современный браузер и заставить его работать без проблем.
ВНИМАНИЕ: Сейчас 2017 год, я все еще получаю баллы за это время от времени, пожалуйста, используйте это только в исследовательских целях. В настоящее время я понятия не имею, как определить статус загрузки изображения, но, вероятно, есть гораздо более изящные способы сделать это, чем этот... по крайней мере, я очень надеюсь, что они есть. Я настоятельно рекомендую НЕ использовать мой код в производственной среде без дополнительных исследований.
ПРЕДУПРЕЖДЕНИЕ Часть вторая Electric Boogaloo: Сейчас 2019 год, большинство функций jQuery встроено в ванильный JS. Если вы все еще используете его, возможно, пришло время остановиться и подумать о том, чтобы зайти на MDN и почитать о некоторых новых и интересных вещах, которые может предложить ванильный JS.
Я немного опоздал на эту вечеринку, возможно, этот ответ поможет кому-то еще...
Если вы используете jQuery, не заморачивайтесь с обработчиками событий (onclick/onmouseover/etc), на самом деле просто перестаньте их использовать вообще. Используйте методы событий, которые они предоставили в своем API.
Это предупредит, прежде чем изображение будет добавлено в тело, потому что событие load срабатывает, когда изображение загружается в память. Он делает именно то, что вы ему говорите: создает изображение с src test.jpg, когда test.jpg загружается, делает оповещение, затем добавляет его в тело.
var img = $('<img src="test.jpg" />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
Это оповестит после того, как изображение будет вставлено в тело, снова делая то, что вы ему сказали: создать изображение, установить событие (src не установлен, поэтому оно не загружено), добавить изображение в тело (по-прежнему без src), теперь установить src... теперь изображение загружено, поэтому срабатывает событие.
var img = $('<img />');
img.load(function() {
alert('Image Loaded');
});
$('body').append(img);
$img.attr('src','test.jpg');
Конечно, вы также можете добавить обработчик ошибок и объединить кучу событий с помощью bind().
var img = $('<img />');
img.bind({
load: function() {
alert('Image loaded.');
},
error: function() {
alert('Error thrown, image didn\'t load, probably a 404.');
}
});
$('body').append(img);
img.attr('src','test.jpg');
По просьбе @ChrisKempen ...
Вот не управляемый событиями способ определить, разбиты ли изображения после загрузки DOM. Этот код является производным кода из статьи StereoChrome, который использует атрибуты naturalWidth, naturalHeight и complete для определения существования изображения.
$('img').each(function() {
if (this.naturalWidth === 0 || this.naturalHeight === 0 || this.complete === false) {
alert('broken image');
}
});
В соответствии со спецификацией W3C , только элементы BODY и FRAMESET предоставляют событие «onload» для подключения. Некоторые браузеры поддерживают его независимо, но имейте в виду, что для реализации спецификации W3C не требуется.
Это обсуждение может иметь отношение к этому обсуждению, хотя и не обязательно к ответу, в котором вы нуждаетесь:
] Событие Image.onload не запускается в Internet Explorer, когда изображение находится в кеше
Что-то еще, что может быть связано с вашими потребностями, хотя это может и не быть, - эта информация о поддержке синтезированной «загрузки» событие для любого динамически загружаемого элемента DOM :
Как определить, был ли динамически созданный элемент DOM добавлен в DOM?
Надежный способ, который я нашел, состоит в том, чтобы сделать все это на стороне клиента, как это ...
var img = new Image();
img.onload = function() {
alert('Done!');
}
img.src = '/images/myImage.jpg';
Я думаю, что onload должна работать нормально. Вам нужно сгенерировать разметку для изображений или вы можете добавить их статически? Если последнее, я бы предложил следующее:
<img src="foo.png" class="classNeededToHideImage" onload="makeVisible(this)">
В качестве альтернативы вы можете использовать window.onload , чтобы сделать все изображения видимыми одновременно - window.onload срабатывает после всех внешних ресурсов закончили загрузку.
Если вы хотите добавить изображения динамически, сначала нужно дождаться, пока DOM будет готов к изменению, то есть использовать jQuery или реализовать свой собственный взлом DOMContentLoaded для браузеров, которые не поддерживают его изначально.
Затем вы создаете свои графические объекты, назначаете onload слушателей, чтобы сделать их видимыми, и / или добавляете их в документ.
Еще лучше (но немного сложнее) было бы создать и начать загрузку изображений сразу после выполнения скрипта. В DOMContentLoaded вам нужно будет проверить каждое изображение на complete , чтобы решить, добавлять ли их немедленно в документ или подождать, пока обработчик образа onload не сработает.
Если я не ошибаюсь в javascript, у тега изображения есть события onload и onerror
, вот интересный фрагмент кода, который я сделал, чтобы скрыть битые изображения
в теге стиля
img.failed{
display:none;
}
] используя img onerror, у меня был кусок javascript, который сделал this.className = fail и он скрыл бы изображение, если бы оно ошибалось
, однако я мог неправильно понять, какова ваша цель
Казалось бы, ответ заключается в использовании onreadystatechange в IE и onLoad в других браузерах. Если ни один не доступен, сделайте что-нибудь еще. onLoad предпочтительнее, но IE не запускает его при загрузке изображения из кэша, как отмечено в одном из ответов ниже.
Хорошо, я попытаюсь обобщить здесь различные частичные ответы (включая мой).
Похоже, ответ заключается в использовании onload, который «широко поддерживается», хотя и не официально требуется в соответствии со стандартами. Обратите внимание, что для IE, в частности, вы должны установить onLoad перед установкой атрибута src, иначе он может не запускать onload при загрузке изображения из кеша. В любом случае это кажется лучшей практикой: настройте обработчики событий, прежде чем запускать события. Если onload не поддерживается, следует предположить, что функциональность просто недоступна.