Javascript-код работает только после обновления страницы, а не при первом просмотре [дубликаты]

Question

Javascript-код работает только после обновления страницы, а не при первом просмотре [дубликаты]

0

Я использую немного 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");
   }
}); 
});

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

Любое исправление для этого?

Lovelock 20 фев. 2014, в 01:31

Источник

0

@ zer02 медиа-запросы не помогут с шириной изображения
kinakuta 19 фев. 2014, в 23:37

Теги:

javascript

jquery

css

image

2 ответа

1

Обработчик jQuery .ready не ожидает загрузки внешних вещей, таких как таблицы стилей или изображений:

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

Обработчик события загрузки в jQuery выглядит примерно так:

$(document).on('load', function() {
    // Your code here
});

Причина, по которой он работал при обновлении страницы, вероятно, объясняется тем, что браузер кэширует изображения (и, следовательно, они готовы до того, как браузер завершит разбор HTML.

SomeKittens 19 фев. 2014, в 21:31

Ещё вопросы

@ zer02 медиа-запросы не помогут с шириной изображения

Arun P Johny · Accepted Answer · 2014-02-19T20-49-00.000Z

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

$(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 не будет запущен, поэтому после регистрации обработчика события нам необходимо отфильтровать изображения, которые уже загружается, а затем вручную запускает событие загрузки, так что для этих изображений событие загрузки будет вызвано