search

Home  >  Q&A  >  body text

javascript - How to call the width and height of the read remote image

I want to call the width and height of this image outside the function. How should I write it?
I've been stuck for three days and have no clue.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

<code>    // 更新:

    // 05.27: 1、保证回调执行顺序:error > ready > load;2、回调函数this指向img本身

    // 04-02: 1、增加图片完全加载后的回调 2、提高性能

 

    /**

     * 图片头数据加载就绪事件 - 更快获取图片尺寸

     *

     * 原理:没有缓存的情况下,用计时器不断验证图片的大小是否发生变化,如果不在变化则为ready

     *       如果有缓存则w3c浏览器会调用 complete,ie则会走 onload,都不在走 计时器那部分

     *

     * @version    2011.05.27

     * @author    TangBin

     * @see        http://www.planeart.cn/?p=1121

     * @param    {String}    图片路径

     * @param    {Function}    尺寸就绪

     * @param    {Function}    加载完毕 (可选)

     * @param    {Function}    加载错误 (可选)

     * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {

alert('size ready: width=' + this.width + '; height=' + this.height);

});

     */

    var imgReady = (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);

            }

            ;

        };

    })();</code>

1

2

3

4

5

6

<code>    var img_url = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';

    imgReady(img_url, function () {

        alert(this.width + '\n' + this.height);

        document.getElementById('song').src = img_url;

 

    })</code>

This kind of pop-up width and height is possible, but how to call this width and height.
Your few codes can save me a lot of time, thank you very much

怪我咯怪我咯2896 days ago498

reply all(2)I'll reply

  • 黄舟

    黄舟2017-05-18 10:59:30

    Callback

    1

    2

    3

    4

    5

    6

    7

    8

    9

    <code>function yourFun(width,height){

        console.log(width,height)

    }

    var img_url = 'http://www.planeart.cn/demo/imgReady/vistas24.jpg';

        imgReady(img_url, function () {

            yourFun(this.width , this.height);

            document.getElementById('song').src = img_url;

     

        })</code>

    I don’t know if I understand it correctly

    reply
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-18 10:59:30

    It seems that this problem cannot be solved. This image reading function is somewhat similar to the asynchronous ajax, and its assignment is executed later

    reply
    0
  • Cancelreply