图片未加载完成时预测图片尺寸

/***************************************************************************************
     * 图片头数据加载就绪获取图片尺寸
     * @version    2011.05.27
     * @author    TangBin
     * @see        
     * @param    {String}    图片路径
     * @param    {Function}    尺寸就绪
     * @param    {Function}    加载完毕 (可选)
     * @param    {Function}    加载错误 (可选)
    yundanran_imageSize(‘1.png‘, function (){
        alert(‘size ready: width=‘ + this.width + ‘; height=‘ + this.height);
    });
    *******************************************************************************************/
    var yundanran_imageSize = (function () {
        var list = [], intervalId = null,
     
        // 用来执行队列
        tick = function () {
            var i = 0;
            for (; i < list.length; i++) {
                list[i].end ? list.splice(i--, 1) : list[i]();
            };
            !list.length && stop();
        },
     
        // 停止所有定时器队列
        stop = function () {
            clearInterval(intervalId);
            intervalId = null;
        };
     
        return function (url, ready, load, error) {
            var onready, width, height, newWidth, newHeight,
                img = new Image();
     
            img.src = url;
     
            // 如果图片被缓存,则直接返回缓存数据
            if (img.complete) {
                ready.call(img);
                load && load.call(img);
                return;
            };
     
            width = img.width;
            height = img.height;
     
            // 加载错误后的事件
            img.onerror = function () {
                error && error.call(img);
                onready.end = true;
                img = img.onload = img.onerror = null;
            };
     
            // 图片尺寸就绪
            onready = function () {
                newWidth = img.width;
                newHeight = img.height;
                if (newWidth !== width || newHeight !== height ||
                    // 如果图片已经在其他地方加载可使用面积检测
                    newWidth * newHeight > 1024
                ) {
                    ready.call(img);
                    onready.end = true;
                };
            };
            onready();
     
            // 完全加载完毕的事件
            img.onload = function () {
                // onload在定时器时间差范围内可能比onready快
                // 这里进行检查并保证onready优先执行
                !onready.end && onready();
     
                load && load.call(img);
     
                // IE gif动画会循环执行onload,置空onload即可
                img = img.onload = img.onerror = null;
            };
     
            // 加入队列中定期执行
            if (!onready.end) {
                list.push(onready);
                // 无论何时只允许出现一个定时器,减少浏览器性能损耗
                if (intervalId === null) intervalId = setInterval(tick, 40);
            };
        };
    })();

时间: 2024-10-14 14:11:37

图片未加载完成时预测图片尺寸的相关文章

js图片未加载完显示loading效果

<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:left;width:200px;height:200px;margin:0 10px 10px 0} </style> <script> //判断浏览器 var Browser=new Object(); Browser.userAgent=window.navigator.userAge

WebView加载HTML时替换图片地址

这两天做项目时,因为实际情况,需要将获取到的html字符串加载出来,并将所有img标签的地址加上主机 开始的时候,我使用系统自带的方法 1 NSURL *baseURL = [NSURL URLWithString:@"主机"]; 2 [webView loadHTMLString:htmlStr baseURL:baseURL]; baseURL会在加载图片的时候自动加到图片地址的前面,但是这样写有个问题,就是主机为http://www.baidu.com的话,这样做没问题,若主机为

图片高效加载(二) 图片的异步加载

图片的异步加载是利用AsynTask类对图像进行后台加载完成后再给ImageView,先转载一篇前人的较好的总结后面再添加一些自己的见解和贴上完整的实现demo. 前面的转自:https://my.oschina.net/rengwuxian/blog/183802 摘要: 有没有过这种体验:你在Android手机上打开了一个带有含图片的ListView的页面,用手猛地一划,就见那ListView嘎嘎地卡,仿佛每一个新的Item都是顶着阻力蹦出来的一样?看完这篇文章,你将学会怎样避免这种情况的发

Vue实现一个图片懒加载插件

前言 图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.direction.Vue图片懒加载插件实现,逐步实现一个Vue的图片懒加载插件. Vue.use() 就像开发jQuery插件要用$.fn.extent()一样,开发Vue插件我们要用Vue.use().其实就是官方内部实现的一个方法,供广大开发者灵活开发属于自己的插件.只需要按照约定好的规则开发就行. 用

WebView加载HTML时图片适配屏幕

今天使用WebView加载HTML时,发现图片过大,没有适配屏幕,于是我设置webView.scalesPageToFit = YES,设置之后,图片确实小了,但是文字也相应地缩小了,而且图片太小,没事配屏幕,不符合我的要求,于是,我又想到了用js解决 1 - (void)webViewDidFinishLoad:(UIWebView *)web 2 { 3 int count = [[webView stringByEvaluatingJavaScriptFromString:@"docume

Android图片异步加载框架Universal Image Loader的源码分析

项目地址:https://github.com/nostra13/android-universal-image-loader 1. 功能介绍 1.1 Android Universal Image Loader Android Universal Image Loader 是一个强大的.可高度定制的图片缓存,本文简称为UIL. 简单的说 UIL 就做了一件事--获取图片并显示在相应的控件上. 1.2 基本使用 1.2.1 初始化 添加完依赖后在Application或Activity中初始化I

jquery的图片异步加载

<script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> <!-- 将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图片(例如 1x1 像素的灰色图片或者 loading 的 gif 图片) 添加 class="lazy" 用于区别哪些图片需要延时加载,当

jQuery Lazy Load图片懒加载

传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js"></script> <script src="jquery.lazyload.js"></script> 2.修改HTML代码中需要修改的IMG标签 <!-- 将真实图片地址写在 data-original 属性中,而 src 属性中的图片换成占位符的图

图片懒加载lazyload

图片懒加载:jquery && jquery-lazyload 图片懒加载是一种前端性能优化方案:随着视图区的滚动,加载剩下的图片,这样当滚动条没有滚动到下面的时候,图片不加载,减少资源浪费 原本:<img src="images/img1.jpg" > 懒加载:<img class="lazy" data-original="images/img1.jpg" > <script type="