Является ли эта система адаптивных изображений хорошей практикой? Используете данные html5? - PullRequest
1 голос
/ 05 января 2012

Я искал и пробовал несколько методов для адаптивных / адаптивных изображений, но обнаружил, что большинство из них мешают манифесту кэша 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");
    }
});
...