Я использую немного javascript, который проверяет все мои изображения по их ширине и добавляет класс в зависимости.
Это выглядит так:
$(document).ready(function(){
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
var box = $(".blogtest");
box.find("img.buildimage").each(function() {
var img = $(this), width = img.width();
if (width >= 700) {
img.addClass("buildimage-large");
} else if (width < 700) {
img.addClass("buildimage-small");
}
});
});
Проблема в том, что у изображений нет класса, добавленного к ним при первом посещении страницы, вместо этого они работают только при обновлении страницы.
Любое исправление для этого?
Вам нужно использовать обработчик нагрузки, потому что, когда запускается готовый обработчик, изображение может не загружаться, поэтому ширина будет первой в первый раз, во второй раз изображение может быть кэшировано в браузере, что позволяет загружать быстрее, поэтому, когда готово обработчик запускается, изображение может быть уже загружено, так что оно работает
$(document).ready(function () {
// check each image in the .blogtest divs for their width. If its less than X make it full size, if not its poor and keep it normal
var box = $(".blogtest");
box.find("img.buildimage").on('load', function () {
var img = $(this),
width = img.width();
if (width >= 700) {
img.addClass("buildimage-large");
} else if (width < 700) {
img.addClass("buildimage-small");
}
}).filter(function () {
//if the image is already loaded manually trigger the event
return this.complete;
}).trigger('load');
});
Но еще один момент, который нужно иметь в виду, заключается в том, что к тому моменту, когда готовый обработчик запускается, если изображение уже загружено, тогда зарегистрированный обработчик load
не будет запущен, поэтому после регистрации обработчика события нам необходимо отфильтровать изображения, которые уже загружается, а затем вручную запускает событие загрузки, так что для этих изображений событие загрузки будет вызвано
Обработчик jQuery .ready
не ожидает загрузки внешних вещей, таких как таблицы стилей или изображений:
В случаях, когда код используется для загруженных активов (например, если требуются размеры изображения), вместо этого код должен быть помещен в обработчик для события загрузки.
Обработчик события загрузки в jQuery выглядит примерно так:
$(document).on('load', function() {
// Your code here
});
Причина, по которой он работал при обновлении страницы, вероятно, объясняется тем, что браузер кэширует изображения (и, следовательно, они готовы до того, как браузер завершит разбор HTML.