Код Javascript работает только после обновления страницы, а не первого просмотра

Question

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

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

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

Answer 1

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

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

Answer 2

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

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

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

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

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