Являются ли свойства изображения частью DOM (несовместимость jQuery-webkit с другими браузерами)? - PullRequest
Новая
       32

Являются ли свойства изображения частью DOM (несовместимость jQuery-webkit с другими браузерами)?

1 голос
/ 14 июля 2009

Я столкнулся с проблемой в Chrome и Safari, используя jQuery для выполнения некоторых вычислений с использованием ширины полосы изображений.

При использовании моих расчетов в: 

$(document).ready(function() {
    /* some calculations with $("img").width() */
});

все отлично работает в IE6 + и Firefox, но не в Chrome и Safari: $ (img) .width () равно 0 независимо от того, кэшировано ли изображение или нет.

Использование: 

$(window).load(function() { 
    /* some calculations with $("img").width() */
});

работает во всех вышеупомянутых браузерах, но проблема в том, что он запускается только тогда, когда все изображения полностью загружены.

Поведение webkit - ожидаемое поведение или есть какая-то ошибка webkit / jQuery, из-за которой свойства изображения не являются частью DOM?

Если это проблема с webkit / jQuery: есть ли способ обойти этот сценарий, который позволит выполнить мой скрипт раньше, чем в вышеупомянутом решении?

Кстати, я не использую никаких встроенных свойств для размеров изображения.

Ответы [ 4 ]

2 голосов
/ 14 июля 2009

Попробуйте указать размеры в тегах img: 

<img src="myimg.jpg" alt="" width="300" height="200" />

Быстрый поиск в Google по этому поводу: http://www.websiteoptimization.com/speed/tweak/size/

То, что я делаю, так как изображения не загружены, webkit будет просто возвращать 0 как «неизвестный» размер, пока изображение не будет загружено. Конкретное указание размера может решить эту проблему.

1 голос
/ 24 сентября 2010

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

loadImage: function(src, callback){
  $("<img alt="" />").attr("src", src).load(callback);
}

и затем я могу использовать img-элемент (который сообщает правильный размер), чтобы установить img-атрибуты внутри обратного вызова 

$(this).attr({
  id: img,
  width: this.width,
  height: this.height
});

и теперь я могу получить правильную высоту и высоту, используя, например, 

var contentWidth = $("#img").attr("width");
1 голос
/ 16 июля 2009

Я не фанат разгрузки задач клиенту, которые должны обрабатываться на сервере.

Реальное решение состоит в том, чтобы вычислить размер изображения при его добавлении в базу данных, а затем правильно сгенерировать тег imageс атрибутами width и height перед отправкой его клиенту.

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

В результате получается семантически значимый HTML-тег, который работает с jQuery во всех браузерах, которые вас интересуют, так почему бы его избежать?

1 голос
/ 16 июля 2009

Я чувствую, что это скорее взломанный способ, но, похоже, он работает (из того, что я тестировал): 

function callback(){
    var el = $(this);
    // if this element was processed or width is 0 (for webkit), then skip
    if(el.data('loaded') || el.width() === 0)
        return;
    el.data('loaded', 1); // marked this element as "processed"
    // do whatever you want to do with el.width()
    console.log(el.width());
}
$(function(){
    // Non-webkit-based browsers will call callback() here
    // otherwise, after each image loads, the callback will execute
    // (for webkit browsers), when the size will be correct.
    $('img').load(callback).each(callback);
})

Webkit-браузеры по-прежнему будут немного медленнее, чем другие браузеры, потому что это после того, как загрузка каждого изображения заканчивается, но это быстрее, чем ожидание всех изображений для загрузки.

...