首页 > 其他 > 详细

响应式图片

时间:2015-09-29 13:06:52      阅读:167      评论:0      收藏:0      [点我收藏+]
在不同的屏幕下,img使用不同的图片资源,已达到响应式图片的效果。
HTML的部分:
<picture>
<source media="(min-width: 650px)" srcset="http://www.w3cplus.com/sites/default/files/blogs/2015/1509/kitten-large.png">
<source media="(min-width: 465px)" srcset="http://www.w3cplus.com/sites/default/files/blogs/2015/1509/kitten-medium.png">
<!-- img tag for browsers that do not support picture element -->
<img src="http://www.w3cplus.com/sites/default/files/blogs/2015/1509/kitten-small.png" alt="a cute kitten" id="picimg">
</picture>

js部分:
(function() {
var currentSrc,oldSrc, imgEl;
var showPicSrc = function() {
oldSrc = currentSrc; imgEl = document.getElementById(‘picimg‘);
currentSrc = imgEl.currentSrc || imgEl.src;
if (typeof oldSrc === ‘undefined‘ || oldSrc !== currentSrc) {
document.getElementById(‘logger‘).innerHTML = currentSrc;
} };
window.addEventListener(‘resize‘, showPicSrc);
window.addEventListener(‘load‘, showPicSrc); })(window);

注:srcset方案目前还在讨论和完善中,但是可以预见,我们将会有一个可靠的技术方案和标准。

响应式图片

原文:http://www.cnblogs.com/will-2008/p/4845801.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!