响应式设计中图像处理方案

1、使用辅助标签或属性隐藏图片地址。避免加载。

2、根据屏幕分辨率处理css样式或img图像

<script type="text/javascript">

$(function(){

//对于css样式用出现图像处理方案

$("[data-image]").each(function(){

var src = screen.width < 500 ? $(this).attr('data-large') : $(this).attr('data-small');

var src_ = 'url\(\"'+src+'\"\)';

$(this).css(

"background-image",src_

);

});

//对于html中出现img图像处理方案

$('noscript[data-large][data-small]').each(function(){

var src = screen.width < 500 ? $(this).data('large') : $(this).data('small');

$('<img src="' + src + '" alt="' + $(this).data('alt') + '" />').insertAfter($(this));

});

});

</script>

<noscript data-large='$!contextPath/images/icon/icon-app-free.png' data-small='$!contextPath/images/icon/icon_auth.png' data-alt='Koala'>

</noscript>

<a data-image="$!contextPath/images/icon/icon-app-free.png" data-large='$!contextPath/images/icon/icon-app-free.png' data-small='$!contextPath/images/icon/icon_auth.png' href="$!open.url" target="_blank"></a>