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

最新推荐文章于 2023-05-09 17:42:56 发布

weixin_34320159

最新推荐文章于 2023-05-09 17:42:56 发布

阅读量673

点赞数

文章标签： python

原文链接：https://my.oschina.net/u/867090/blog/209391

版权

2019独角兽企业重金招聘Python工程师标准>>>

为图片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

转载于:https://my.oschina.net/u/867090/blog/209391