PHPIN.NET

 找回密码
 立即注册
查看: 4601|回复: 0

[jQuery/Js/AJAX] JS实现未知图片大小的等比例缩放

[复制链接]

469

主题

31

回帖

5497

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5497
发表于 2018-12-6 11:54:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

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

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5. <title></title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <style type="text/css">
  8. /*demo style*/
  9. body { font:12px 'Microsoft Yahei', Tahoma, Arial; _font-family:Tahoma, Arial; }
  10. a { color:#0259C4; }
  11. a:hover { color:#900; }
  12. .parentCls { width:680px; padding:10px; margin-top:50px; overflow:hidden; border:1px solid #CCC; }
  13. .parentCls p { padding: 0 8px; }
  14. .parentCls img { border:0 none; }
  15. </style>
  16. </head>
  17. <body>
  18. 第二张图片就是没有等比缩放和第一张图对比


  19. <div class="parentCls">
  20.     <p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg"/></p>
  21.     <p><img src="http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg" class="autoImg2"/></p>
  22.     <p><img src="http://gtms01.alicdn.com/tps/i1/T11LpGFs8jXXb5rXb6-1060-300.jpg" class="autoImg"></p>
  23.     <p><img src="http://img04.taobaocdn.com/imgextra/i4/397746073/T2fjl5XA8aXXXXXXXX-397746073.jpg" class="autoImg"/></p>
  24. </div>
  25.    
  26.   

  27. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  28. <script type="text/javascript">
  29. /**
  30. * JS实现未知图片大小的等比例缩放
  31. */
  32. function AutoImg(options) {
  33.     this.config = {
  34.         autoImg     : '.autoImg',     // 未知图片dom节点
  35.         parentCls   : '.parentCls'    // 父节点
  36.     };
  37.     this.cache = {};
  38.     this.init(options);
  39. }
  40. AutoImg.prototype = {
  41.      init: function(options){
  42.         this.config = $.extend(this.config, options || {});
  43.         var self = this,
  44.             _config = self.config;
  45.         $(_config.autoImg).each(function(index,img){
  46.             var src = img.src,
  47.                 parentNode = $(img).closest(_config.parentCls),
  48.                 parentWidth = $(parentNode).width();
  49.             // 先隐藏原图
  50.             img.style.display = 'none';
  51.             img.removeAttribute('src');
  52.             // 获取图片头尺寸数据后立即调整图片
  53.             imgReady(src, function (width,height) {
  54.                 // 等比例缩小
  55.                 if (width > parentWidth) {
  56.                     height = parentWidth / width * height,
  57.                     width = parentWidth;
  58.                     img.style.width = width + 'px';
  59.                     img.style.height = height + 'px';
  60.                 };
  61.                 // 显示原图
  62.                 img.style.display = '';      
  63.                 img.setAttribute('src', src);
  64.                
  65.             });
  66.         });
  67.      }
  68. };
  69. var imgReady = (function(){
  70.     var list = [], intervalId = null;
  71.     // 用来执行队列
  72.     var queue = function(){
  73.         for(var i = 0; i < list.length; i++){
  74.             list[i].end ? list.splice(i--,1) : list[i]();
  75.         }
  76.         !list.length && stop();
  77.     };
  78.     // 停止所有定时器队列
  79.     var stop = function(){
  80.         clearInterval(intervalId);
  81.         intervalId = null;
  82.     }
  83.     return function(url, ready, error) {
  84.         var onready = {}, width, height, newWidth, newHeight,img = new Image();
  85.         img.src = url;
  86.         // 如果图片被缓存,则直接返回缓存数据
  87.         if(img.complete) {
  88.             ready(img.width, img.height);
  89.             return;
  90.         }
  91.         width = img.width;
  92.         height = img.height;
  93.         // 加载错误后的事件
  94.         img.onerror = function () {
  95.             error && error.call(img);
  96.             onready.end = true;
  97.             img = img.onload = img.onerror = null;
  98.         };
  99.         // 图片尺寸就绪
  100.         var onready = function() {
  101.             newWidth = img.width;
  102.             newHeight = img.height;
  103.             if (newWidth !== width || newHeight !== height ||
  104.                 // 如果图片已经在其他地方加载可使用面积检测
  105.                 newWidth * newHeight > 1024
  106.             ) {
  107.                 ready(img.width, img.height);
  108.                 onready.end = true;
  109.             };
  110.         };
  111.         onready();
  112.         // 完全加载完毕的事件
  113.         img.onload = function () {
  114.             // onload在定时器时间差范围内可能比onready快
  115.             // 这里进行检查并保证onready优先执行
  116.             !onready.end && onready();
  117.             // IE gif动画会循环执行onload,置空onload即可
  118.             img = img.onload = img.onerror = null;
  119.         };
  120.         // 加入队列中定期执行
  121.         if (!onready.end) {
  122.             list.push(onready);
  123.             // 无论何时只允许出现一个定时器,减少浏览器性能损耗
  124.             if (intervalId === null) {
  125.                 intervalId = setInterval(queue, 40);
  126.             };
  127.         };
  128.     }
  129. })();

  130. $(function(){
  131.         new AutoImg({autoImg:'.autoImg',parentCls:'.parentCls'});
  132. });
  133. </script>
  134. </body>
  135. </html>
复制代码

JSFiddle.html (4.72 KB, 下载次数: 1)
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-3-29 14:34

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表