Я искал и пробовал несколько методов для адаптивных / адаптивных изображений, но обнаружил, что большинство из них мешают манифесту кэша html5.
Я хотел бы получить отзыв о том, является ли этот метод хорошей практикой (примечание: он задерживает загрузку изображений до запуска сценариев, но предотвращает двойную загрузку ресурсов изображений)
Типичный HTML:
<img data-name="001.jpg">
<img data-name="002.jpg">
<img data-name="003.jpg">
JavaScript:
var fullTest=$(window).width();
if ((fullTest < 1025) && (fullTest > 600) ){
var imageFolder = 'photos/medium/';
console.log('medium images');
} else if (fullTest > 1024) {
var imageFolder = 'photos/large/';
console.log('large images');
} else {
var imageFolder = 'photos/';
console.log('small images');
}
$('img').each(function () {
imageName = $(this).data('name');
if (imageName){
$(this).attr('src', imageFolder + imageName);
console.log(imageName+"was changed");
} else {
console.log($(this).attr('src')+" was not changed");
}
});