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

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>