weibo_哆啦A梦有大口袋_0
分开啊，最近我正在学习《所向披靡的响应式开发》分享部分笔记6.4 如何实现响应式图片-概述1(JS或服务端实现) 1.响应式设计让很多的web应用和网站都兼容手机、平板、PC等等各种设备,但是在流量昂贵的时代, 让一个手机去加载为大屏幕PC设计的几百k广告图片，显然用户是不能接受的。虽然这个图片看起来 非常的清晰,但是疯长的浏览消耗会让用户苦恼,而且需要加载更长的时间才能把页面加载出来。 2.为了用户更好的体验,加载与用户设备相匹配的小图片,即快速,又不会影响用户的体验。 3.为了解决上述问题,响应式图片的概念随之产生了。 1.图片的排版和布局 2.根据设备大小加载不同的图片 4.如何实现响应式图片 1.js或服务器端 1.通过js或者服务端控制图片的加载,这种方式的原理跟踪Window Screen事件, 然后修改图片的路径,代码非常简单 详情看demo responsiveimg.html 2.通过把屏幕信息或者设备信息写入cookie,在获取图片的时候,在服务器端决定 返回那种图片,这样的话就不需要写脚本了。通过cookie和服务器端就可以实现, 兼容性也比较好通过js控制图片的加载代码如下<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Responsiveimg</title>
</head>
<body>
<div class="content">
<img src="">
</div>
</body>
<script type="text/javascript" src="js/vendor/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
function makeImageResponsive(){
var width=$(window).width();
var img=$('.content img');
if(width<=480){
img.attr('src','img/480.jpg');
}
else if(width<=800){
img.attr('src','img/800.jpg');
}
else{
img.attr('src','img/1600.jpg')
}
}
// 在window加载和改变尺寸的时候调用方法
$(window).on('resize load',makeImageResponsive);
})
</script>
</html>还有其他方法1.srcset 2.srcset配合sizes 3.picture 图片4.SVG