Я пытаюсь добавить атрибут data-size
к моему родителю div
.
Вот мой код:
var width, height;
$(".galerie img").each(function() {
width = this.naturalWidth;
height = this.naturalHeight;
$(this).parent().attr('data-size', width+'x'+height);
});
У меня около 40 фотографий на 1 странице. Таким образом, не каждый мой div получит «размер данных». Иногда только 1/2 из них, иногда 1/3 из них или только 5 из них. Как я могу это исправить?
3 ответа
Используйте document.ready в window.load. это связано с тем, что не все изображения загружаются должным образом до запуска каждой функции
$(window).on("load", function() {
var width, height;
$(document).ready(function(){
$(".galerie img").each(function() {
width = this.naturalWidth;
height = this.naturalHeight;
$(this).parent().attr('data-size', width+'x'+height);
});
});
});
Я думаю, что проблема в том, что вы запускаете каждый, когда изображения не загружены. Может быть, вы должны проверить, если последний загружен, прежде чем делать это
Попробуйте проверить это примерно так:
if (typeof img.naturalWidth !== "undefined" && img.naturalWidth === 0) {
Или библиотека javascript imagesLoaded.
Используйте new Image()
и ждите его onload
var width,
height;
$(".galerie img").each(function() {
var $that = $(this);
var img = new Image();
img.onload = function(){
width = this.naturalWidth;
height = this.naturalHeight;
$that.parent().attr('data-size', width+'x'+height);
});
img.src = this.src;
});
Похожие вопросы
Связанные вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.