文档章节

为网页中图片src添加媒体查询功能。

BryanYang
 BryanYang
发布于 2014/03/18 19:12
字数 461
阅读 26
收藏 0

为图片src 增加媒体查询。

Css 中的媒体查询默认是没有为图片指定src,的 但是如果页面中需要根据浏览器宽度指定图片src, 比如当电脑的时候,加载大图,手机的时候加载小图。

今天发现一个很棒的方法,相当于通过js可以扩展浏览器的媒体查询,

<html>    
	<head>    
		<meta charset=utf-8 />    
		<meta name="viewport" content="width=device-width,initial-scale=1">    
		<title>Picturefill</title>    
		<script src="external/matchmedia.js"></script>    
		<script src="picturefill.js"></script>    
		<style>    
			body { font-family: sans-serif }    
			img {  max-width: 100% }    
		</style>    
	</head>    
	<body>    
		<h1>Picturefill: A &lt;picture&gt; element polyfill</h1>    
		<p>For more info: <a href="http://github.com/scottjehl/picturefill">see project home.</a></p>    
		<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">    
			<span data-src="external/imgs/small.jpg"></span>    
			<span data-src="external/imgs/medium.jpg" data-media="(min-width: 400px)"></span>    
			<span data-src="external/imgs/large.jpg" data-media="(min-width: 800px)"></span>    
			<span data-src="external/imgs/extralarge.jpg" data-media="(min-width: 1000px)"></span>    
			<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->    
			<noscript><img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"></noscript>    
		</span>    
	</body>    
</html>

在页面中这样写,然后js这样处理

/*! Picturefill - Responsive Images that work today. (and mimic the proposed Picture element with span elements). Author: Scott Jehl, Filament Group, 2012 | License: MIT/GPLv2 */

(function( w ){

	// Enable strict mode
	"use strict";

	w.picturefill = function() {
		var ps = w.document.getElementsByTagName( "span" );

		// Loop the pictures
		for( var i = 0, il = ps.length; i < il; i++ ){
			if( ps[ i ].getAttribute( "data-picture" ) !== null ){

				var sources = ps[ i ].getElementsByTagName( "span" ),
					matches = [];

				// See if which sources match
				for( var j = 0, jl = sources.length; j < jl; j++ ){
					var media = sources[ j ].getAttribute( "data-media" );
					// if there's no media specified, OR w.matchMedia is supported 
					if( !media || ( w.matchMedia && w.matchMedia( media ).matches ) ){
						matches.push( sources[ j ] );
					}
				}

			// Find any existing img element in the picture element
			var picImg = ps[ i ].getElementsByTagName( "img" )[ 0 ];

			if( matches.length ){
				var matchedEl = matches.pop();
				if( !picImg || picImg.parentNode.nodeName === "NOSCRIPT" ){
					picImg = w.document.createElement( "img" );
					picImg.alt = ps[ i ].getAttribute( "data-alt" );
				}

				picImg.src =  matchedEl.getAttribute( "data-src" );
				matchedEl.appendChild( picImg );
			}
			else if( picImg ){
				picImg.parentNode.removeChild( picImg );
			}
		}
		}
	};

	// Run on resize and domready (w.load as a fallback)
	if( w.addEventListener ){
		w.addEventListener( "resize", w.picturefill, false );
		w.addEventListener( "DOMContentLoaded", function(){
			w.picturefill();
			// Run once only
			w.removeEventListener( "load", w.picturefill, false );
		}, false );
		w.addEventListener( "load", w.picturefill, false );
	}
	else if( w.attachEvent ){
		w.attachEvent( "onload", w.picturefill );
	}

}( this ));

就行了。


demo url:   demo

© 著作权归作者所有

BryanYang
粉丝 16
博文 165
码字总数 52036
作品 0
石景山
程序员
私信 提问
为改善用户体验 谷歌推系列11项新功能

本月14日,谷歌在旧金山举行的新闻发布会展示了谷歌桌面搜索和移动搜索的一些新功能。其中包括桌面语音搜索和图片搜索等。 谷歌称,公司正利用语音识别、计算机视觉以及电脑翻译等创新技术试...

疯语者
2011/06/15
1.5K
5
响应式Web设计(四):响应式Web设计的优化

这篇文章主要说说在进行响应式Web设计的过程中,涉及到页面的一些需要进行优化的地方: 1、 轻量级的Javascript库: 针对PC端网页当然会首选jQuery来作为前端javascript库,但是针对移动端来...

幸福2胖纸
2013/05/06
4.3K
23
CSS核心内容整理 - (下)

前言 整体来说CSS还是比较容易掌握的,如果你愿意话大量的时间去实践,当然这更像是废话.CSS中有很多细节的东西,没有办法一一拿出来说,所以在整个系列中我就挑出了我认为最重要的CSS内容,所谓最...

顽Shi
2014/05/03
1.6K
5
CodeIgniter 微信开发类库--CI_WeChat-PHP-SDK

项目演示主页:http://www.openant.com CIWeChat-PHP-SDK,CodeIgniter微信开发类库,修改自https://github.com/zoujingli/wechat-php-sdk SDK 封装对接及功能 接入验证 (初级权限) 自动回...

xCalder
2016/10/17
4.1K
1
关于需求-取消媒体管理

取消媒体管理 > 媒体管理有添加,浏览、删除和查询功能。博客用户可以添加自己喜欢的图片或视频等,还可以查询和浏览系统中的所有媒体信息。游客只能浏览博客系统中的媒体信息。系统管理员拥...

Trial
2015/09/28
5
0

没有更多内容

加载失败,请刷新页面

加载更多

如何将git标记为已删除的文件并将新文件作为文件移动?

我手动移动了一个文件,然后我修改了它。 根据Git,它是一个新文件和一个删除文件。 有没有办法强迫Git将其视为文件移动? #1楼 这是一个快速而又脏的解决方案,用于一个或几个未重命名的已重...

技术盛宴
1分钟前
0
0
Spring Boot Dependency Management with a Custom Parent

1. Overview Spring Boot provides the parent POM for an easier creation of Spring Boot applications. However, using the parent POM may not always be desirable, if we already have......

Ciet
4分钟前
0
0
如何在Swift 3、4和5中编写GCD中的dispatch_after?

在Swift 2中,我能够使用dispatch_after来通过中央中央调度来延迟动作: var dispatchTime: dispatch_time_t = dispatch_time(DISPATCH_TIME_NOW, Int64(0.1 * Double(NSEC_PER_SEC))) dis......

javail
17分钟前
23
0
Elasticsearch入门 - 核心概念详解

开篇 我们在Elasticsearch - 概念篇中,提到不要急于写代码,当时还贴出如下一段代码,里面很多注解都看不懂什么意思,本篇介绍完几个核心概念后,再去看代码就会明朗很多。 @Document(inde...

nimo10050
21分钟前
27
0
六、Spring Cloud之配置中心config

前言 前面我们讲了微服务的注册中心、负载均衡、熔断处理、网管服务。接下来我们讲配置中心,为什么要用配置中心呢? 其实我们接触一段时间就可以发现,我们的项目还是非常多的,每个项目都有...

quellanan2
今天
33
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部