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> |
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] wrapAll - 선택요소 4개씩 묶어 부모요소 wrap으로 감싸기, 반복문 4의 배수 (0) | 2019.01.09 |
|---|---|
| [JQuery] input file 이미지 파일 등록 업로드, 이미지 미리보기, 이미지 파일 삭제 (1) | 2018.08.23 |
| [jQuery] 자식 선택자를 못찾을때 - p 태그가 가질수 있는 요소 확인 (0) | 2017.06.06 |
| [jQuery] $.unique() - DOM 요소 배열에서 중복요소 제거 (0) | 2017.05.01 |
| [jQueryt] $.extend - 객체합치기, 깊은복사, 얕은복사 (0) | 2017.03.18 |
