JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<h2>缩放后的</h2>
<div class="parentCls">
    <p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p>
    <p><img src="http://gtms01.alicdn.com/tps/i1/T11LpGFs8jXXb5rXb6-1060-300.jpg" class="autoImg"></p>
    <p><img src="http://img04.taobaocdn.com/imgextra/i4/397746073/T2fjl5XA8aXXXXXXXX-397746073.jpg" class="autoImg"/></p>
    <p><img src="http://img03.taobaocdn.com/tps/i3/T1CXpTFkpcXXb5rXb6-1060-300.jpg" class="autoImg"/></p>
    <p><img src="http://gtms01.alicdn.com/tps/i1/T1hC0HFwxaXXb5rXb6-1060-300.jpg" class="autoImg"/></p>
    <p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p>
	<p><img src="http://gtms01.alicdn.com/tps/i1/T1hC0HFwxaXXb5rXb6-1060-300.jpg" class="autoImg"/></p>
</div>

CSS

/*demo style*/
body { font:12px 'Microsoft Yahei', Tahoma, Arial; _font-family:Tahoma, Arial; }
a { color:#0259C4; }
a:hover { color:#900; }
.demoInfo { padding:10px; background:#F7F7F7; border:1px solid #EEE; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; }
.tips { color:#CCC; }
.parentCls { width:680px; padding:10px; margin-top:50px; overflow:hidden; border:1px solid #CCC; }
.parentCls p { padding: 0 8px; }
.parentCls img { border:0 none; }

JavaScript

/**
 * JS实现未知图片大小的等比例缩放
 */

 function AutoImg(options) {
	
	this.config = {
		autoImg     : '.autoImg',     // 未知图片dom节点
		parentCls   : '.parentCls'    // 父节点
	};

	this.cache = {
		
	};

	this.init(options);
 }
 
 AutoImg.prototype = {
	
	 init: function(options){
		this.config = $.extend(this.config, options || {});
		var self = this,
			_config = self.config;
		
		$(_config.autoImg).each(function(index,img){
			
			var src = img.src,
				parentNode = $(img).closest(_config.parentCls),
				parentWidth = $(parentNode).width();
				
			// 先隐藏原图
			img.style.display = 'none';
			img.removeAttribute('src');

			

			// 获取图片头尺寸数据后立即调整图片
			imgReady(src, function (width,height) {

				// 等比例缩小
				if (width > parentWidth) {
					height = parentWidth / width * height,
					width = parentWidth;
					img.style.width = width + 'px';
					img.style.height = height + 'px';
				};
				// 显示原图
				img.style.display = '';
				
				img.setAttribute('src', src);
				
			});
		});
	 }
 };

 var imgReady = (function(){
    var list = [],
        intervalId = null;

    // 用来执行队列
    var queue = function(){

        for(var i = 0; i < list.length; i++){
            list[i].end ? list.splice(i--,1) : list[i]();
        }
        !list.length && stop();
    };
    
    // 停止所有定时器队列
    var stop = function(){
        clearInterval(intervalId);
        intervalId = null;
    }
    return function(url, ready, error) {
        var onready = {}, 
            width, 
            height, 
            newWidth, 
            newHeight,
            img = new Image();
        img.src = url;

        // 如果图片被缓存，则直接返回缓存数据
        if(img.complete) {
            ready(img.width, img.height);
            return;
        }
        width = img.width;
        height = img.height;

        // 加载错误后的事件 
        img.onerror = function () {
            error && error.call(img);
            onready.end = true;
            img = img.onload = img.onerror = null;
        };

        // 图片尺寸就绪
        var...