收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 1559|回复: 1

求助!图片自动缩放功能,争需

[复制链接]
发表于 2012-1-13 19:45:36 | 显示全部楼层 |阅读模式
首先说明我对js或是jq应该是不了解的,稍微改点样式之类的可以,要改功能就不行了。所以请朋友们帮忙的时候尽量说的详细些。
要做一个jq的图片自动缩放功能,而且页面中已有lazyload延时加载。所有的图片链接数据都是以以下方式存储的<img data-original="图片路径" src="占位图" />
一般的方法是读取src内图片的高或宽来和父级进行判断,但因占位图非常小(或1px),以至判断的时候出错将占位图的大小默认为图片的大小。
后面找了一个图片预加载技术http://www.planeart.cn/?p=1121,可以直接读取图片路径,得出其大小,这样一来就可以直接读取data-original的数据得出图片的真实大小,从而再来进行比较、缩放,而且也不影响延时加载功能。

下面是的原代码http://www.planeart.cn/?p=1121
  1. // 更新:
  2. // 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身
  3. // 04-02: 1、增加图片完全加载后的回调 2、提高性能

  4. /**
  5. * 图片头数据加载就绪事件 - 更快获取图片尺寸
  6. * @version        2011.05.27
  7. * @author        TangBin
  8. * @see                http://www.planeart.cn/?p=1121
  9. * @param        {String}        图片路径
  10. * @param        {Function}        尺寸就绪
  11. * @param        {Function}        加载完毕 (可选)
  12. * @param        {Function}        加载错误 (可选)
  13. * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
  14.                 alert('size ready: width=' + this.width + '; height=' + this.height);
  15.         });
  16. */
  17. var imgReady = (function () {
  18.         var list = [], intervalId = null,

  19.         // 用来执行队列
  20.         tick = function () {
  21.                 var i = 0;
  22.                 for (; i < list.length; i++) {
  23.                         list[i].end ? list.splice(i--, 1) : list[i]();
  24.                 };
  25.                 !list.length && stop();
  26.         },

  27.         // 停止所有定时器队列
  28.         stop = function () {
  29.                 clearInterval(intervalId);
  30.                 intervalId = null;
  31.         };

  32.         return function (url, ready, load, error) {
  33.                 var onready, width, height, newWidth, newHeight,
  34.                         img = new Image();

  35.                 img.src = url;

  36.                 // 如果图片被缓存,则直接返回缓存数据
  37.                 if (img.complete) {
  38.                         ready.call(img);
  39.                         load && load.call(img);
  40.                         return;
  41.                 };

  42.                 width = img.width;
  43.                 height = img.height;

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

  50.                 // 图片尺寸就绪
  51.                 onready = function () {
  52.                         newWidth = img.width;
  53.                         newHeight = img.height;
  54.                         if (newWidth !== width || newHeight !== height ||
  55.                                 // 如果图片已经在其他地方加载可使用面积检测
  56.                                 newWidth * newHeight > 1024
  57.                         ) {
  58.                                 ready.call(img);
  59.                                 onready.end = true;
  60.                         };
  61.                 };
  62.                 onready();

  63.                 // 完全加载完毕的事件
  64.                 img.onload = function () {
  65.                         // onload在定时器时间差范围内可能比onready快
  66.                         // 这里进行检查并保证onready优先执行
  67.                         !onready.end && onready();

  68.                         load && load.call(img);

  69.                         // IE gif动画会循环执行onload,置空onload即可
  70.                         img = img.onload = img.onerror = null;
  71.                 };

  72.                 // 加入队列中定期执行
  73.                 if (!onready.end) {
  74.                         list.push(onready);
  75.                         // 无论何时只允许出现一个定时器,减少浏览器性能损耗
  76.                         if (intervalId === null) intervalId = setInterval(tick, 40);
  77.                 };
  78.         };
  79. })();
复制代码
请懂技术的朋友帮我下。
 楼主| 发表于 2012-1-14 21:23:34 | 显示全部楼层
没有高手了嘛?
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-6 06:39 , Processed in 0.093513 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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