[jQuery] css 배경이미지 넓이 높이 사이즈 얻기

jQuery

[jQuery] css 배경이미지 넓이 높이 사이즈 얻기 - image load event

힘없는염소 2017. 9. 22. 10:14

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
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
    .img-box {
    width:500px; 
    height:500px;
    }
</style>
</head>
<body>
 
    <div class="img-box" style="background:url(images/0.jpg);"></div>
    <div class="img-box" style="background:url(images/1.jpg);"></div>
    <div class="img-box" style="background:url(images/2.jpg);"></div>
    <div class="img-box" style="background:url(images/3.jpg);"></div>
    <div class="img-box" style="background:url(images/4.jpg);"></div>
 
    <script src="lib/jquery/2.2.3/jquery.min.js"></script>
    <script>
 
        // css 배경이미지 넓이 높이 얻기 - image load event
        $.each($(".img-box"), function(idx, el) {
 
            var $imgbox = $(el);
            var uri = $imgbox.css('background-image').match(/^url\("?(.+?)"?\)$/)[1];
 
            /*var imgObj = new Image;
            imgObj.src = uri;
            $(imgObj).one("load", function() {
            var _img = this;
            console.log(_img); 
            console.log(_img.width); 
            console.log(_img.height); 
            });*/
 
            $('<img>').attr('src', uri).one('load', function() {
                console.log(this);
                console.log(this.width);
                console.log(this.height);
            });
        }); 
 
    </script>
</body>
</html>

저작자표시 (새창열림)