Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript
Войти
Регистрация
Восстановить пароль
 
 
Рейтинг: Рейтинг темы: голосов - 9, средняя оценка - 4.67
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
#1

Размеры background через javascript - JavaScript

15.08.2014, 16:17. Просмотров 1556. Ответов 31
Метки нет (Все метки)

Добрый день!
Ребята, как получить размеры картинки, подключаемой через css?
HTML5
1
2
3
    <div class="main">
        <div id="anim"></div>
    </div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body{
    margin: 0;
    padding: 0;
}
.main{
    position: relative;
    background: #A3E496;
    height: 300px;
    width: 500px;
    margin: 0 auto;
    margin-top: 150px;
}
#anim{
    display: block;
    width: 162.5px;
    height: 216px;
    position: relative;
    top: 65px;
    background-image: url("anim_01.png");
    background-color: #CC6699;
    margin: 0 auto;
    
}
Javascript
1
2
3
4
5
6
7
8
9
$(function(){
    var widthDIV = $("#anim").width();
    var heightDIV = $("#anim").height();
    var img = new Image;
    img.src = $('#anim').css('background-image').replace(/url\((['"])?(.*?)\1\)/gi, '');
    var bgImgHeight = img.height;
    var bgImgWidth = img.width;
alert(bgImgHeight + ' ' + bgImgWidth);
});
Размеры блока получилась записать в переменные, а вот размер картинки - не выходит.
Код на получение размеров картинки подсмотрел в интернете...

Результат: ошибок нет, но вот в переменных bgImgHeight и bgImgWidth лежат нули. Как быть?
http://www.cyberforum.ru/javascript/thread1913059.html
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.08.2014, 16:17
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Размеры background через javascript (JavaScript):

изменить background-image из javascript
как изменить background-image для div'a (ie8 browser). &lt;html&gt; &lt;head&gt;...

Вставка элементов меню (содержащих javascript) через javascript
Пишу курсовой проект по JavaScript в ходе которого потребовалось создать...

Ссылка через background
Здравствуйте! Необходимо сделать так, что бы нажимая на картинку, тебя...

Как добавить онлайн оплату или банковские переводы в страницу через PHP или через JavaScript
Здравствуйте ребята))) подскажите пожалуйста, как добавить онлайн оплату или...

Изменить CSS свойство "background-img" через JS
Как изменить CSS свойство &quot;background-img&quot; через JS? Так делаю, но он ругается...

31
qm
25 / 24 / 7
Регистрация: 15.08.2014
Сообщений: 60
18.08.2014, 13:00 #21
Получилась совсем каша
По первых не учтено замечание kalabuni.
Обработчик события onload должен быть присвоен до присвоения src:
Javascript
1
2
3
4
img.onload = function () {
      //обработка события
};
img.src = $('#anim').css('background-image').slice(4, -1);
Во вторых нельзя использовать .offsetWidth и .offsetHeight, так как они помимо высоты и ширины элемента включают еще padding и border, которые могут быть заданы на все картинки, например:
CSS
1
2
3
img {
  border: 10px solid black;
}
вернет результат на 20 больший ожидаемого и для ширины и для высоты. Да и вообще, добавлять картинку в DOM нет смысла, это какой-то бесмысленный, беспощадный хак.
В третьих
Javascript
1
img.src = "anim_01.png";
src прописан вручную, что не есть хорошо, если вам захочется поменять картинку в css, менять придется и в js.
А когда такого когда станет очень много, уследить будет практически невозможно.
Ну и вместо того, чтобы засорять пространство глобальными переменными можно просто передать нужные значения в функцию, использующую их:
Javascript
1
2
3
img.onload = function () {
  myFunction(img.width, img.height);
};
Цитата Сообщение от sweelemk Посмотреть сообщение
qm, код выдает ошибку о том, что картинка не найдена.
Странно, для вашего примера slice должен был сработать, возможно вы вносили какие-то изменения?
Вообще, по-хорошему, тут конечно лучше выцепить url регэкспом.
0
Eva Rosalene
Male-to-Female
4049 / 1586 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
18.08.2014, 13:04 #22
Цитата Сообщение от qm Посмотреть сообщение
Обработчик события onload должен быть присвоен до присвоения src
Загрузка всё равно начинается после аттача к body.
#UPD: Извиняюсь. Проверил - после указания src.

Цитата Сообщение от qm Посмотреть сообщение
src прописан вручную, что не есть хорошо, если вам захочется поменять картинку в css, менять придется и в js.
Это скорее пример.

Цитата Сообщение от qm Посмотреть сообщение
Ну и вместо того, чтобы засорять пространство глобальными переменными можно просто передать нужные значения в функцию, использующую их:
Они находятся в области видимости ананоимной функции и доступны только изнутри неё / через замыкания.
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 13:07  [ТС] #23
FraidZZ, это хорошо, но вот не пойму, как теперь эти значения можно использовать.. В плане, какую переменную брать, чтобы эти значения использовать в других функциях.
0
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
18.08.2014, 13:08 #24
qm,
Цитата Сообщение от qm Посмотреть сообщение
Да и вообще, добавлять картинку в DOM нет смысла, это какой-то бесмысленный, беспощадный хак.
Нельзя измерить размеры элемента, которого нет на страничке. По крайне мере если мы программно ему сами не присваиваем их.

Почему это выдает 0/0

Javascript
1
2
3
4
5
6
7
(function(){    
    var img = new Image();
    img.onload = function () {      
        alert("width: " + img.offsetWidth + " /height: " + img.offsetHeight);
    }
    img.src = "test.jpg"; 
})()
А это размеры:

Javascript
1
2
3
4
5
6
7
8
(function(){    
    var img = new Image();
    img.onload = function () {      
        alert("width: " + img.offsetWidth + " /height: " + img.offsetHeight);
    }
    img.src = "test.jpg"; 
    document.body.appendChild(img) 
})()
0
Eva Rosalene
Male-to-Female
4049 / 1586 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
18.08.2014, 13:09 #25
Да, тогда придётся так:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(function(){
    var img = new Image();
    
    img.onload = (function () {      
        var widthImg = img.width;
        var heightImg = img.height;
        callbackFn(widthImg, heightImg);
    });
 
    with(img.style) {
        position = "fixed";
        opacity = 0;
        zIndex = -9999;
    }
 
    document.body.appendChild(img); 
    img.src = "http://cyberforum.ru/images/cyberforum_logo.png";
 
    function callbackFn(w, h){
       alert(w + "x" + h);
    };
});
0
Thisman
Модератор
757 / 339 / 134
Регистрация: 17.07.2013
Сообщений: 961
18.08.2014, 13:10 #26
Цитата Сообщение от FraidZZ Посмотреть сообщение
Загрузка всё равно начинается после аттача к body.
Привел пример, там функция срабатывает даже если не добавлять элемент в дом. Значит загрузка идет сразу при присвоении src картинке. Получается так
0
Eva Rosalene
Male-to-Female
4049 / 1586 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
18.08.2014, 13:11 #27
sweelemk, функции передавать колбэком, сказали же. В асинхроне по другому не получится.

Добавлено через 17 секунд
Thisman, я уже поправился
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 13:13  [ТС] #28
qm, нет, Ваш код скопировал и вставил в свой документ. Только название картинки свое поставил
0
qm
25 / 24 / 7
Регистрация: 15.08.2014
Сообщений: 60
18.08.2014, 13:13 #29
Цитата Сообщение от FraidZZ Посмотреть сообщение
Они находятся в области видимости ананоимной функции и доступны только изнутри неё / через замыкания.
Ну это замечание было к коду Thisman.
Цитата Сообщение от Thisman Посмотреть сообщение
Нельзя измерить размеры элемента, которого нет на страничке. По крайне мере если мы программно ему сами не присваиваем их.
Кто вам такое сказал? У объекта Image есть свойства .width, .height.
0
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 13:31  [ТС] #30
FraidZZ, прошу прощения за глупость, но пока новичек и не совсем понять про каллбэк-функцию и как с ней раотать
0
Eva Rosalene
Male-to-Female
4049 / 1586 / 301
Регистрация: 06.01.2013
Сообщений: 4,176
Завершенные тесты: 2
18.08.2014, 13:41 #31
Что ж, попытка номер какая-то:

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
    var img = new Image();
    
    img.onload = (function () {      
        var widthImg = img.width;
        var heightImg = img.height;
        callbackFn(widthImg, heightImg);
    });
 
    img.src = ($('#anim').css('background-image').match(/url\s*\((.*?)\)/ig) || []).map(function (item){return item.replace(/url\s*\((.*?)\)/, "$1")})[0]
 
    function callbackFn(w, h){
       alert(w + "x" + h);
    };
})();
Добавлено через 1 минуту
Цитата Сообщение от sweelemk Посмотреть сообщение
каллбэк-функцию и как с ней раотать
Если совсем просто - вызывайте необходимый код сразу из onload, а не в продолжении скрипта.

Добавлено через 2 минуты
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
(function(){
    var img = new Image();
    
    img.onload = (function () {      
        var widthImg = img.width;
        var heightImg = img.height;
        callbackFn(widthImg, heightImg);
    });
 
    img.src = ($('#anim').css('background-image').match(/url\s*\((.*?)\)/ig) || []).map(function (item){return item.replace(/url\s*\(['"]?(.*?)['"]?\)/, "$1")})[0]
 
    function callbackFn(w, h){
       alert(w + "x" + h);
    };
})();
1
sweelemk
0 / 0 / 1
Регистрация: 16.09.2013
Сообщений: 127
18.08.2014, 14:24  [ТС] #32
FraidZZ, Спасибо! Теперь разобрался!
0
18.08.2014, 14:24
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
18.08.2014, 14:24
Привет! Вот еще темы с решениями:

Excel через JavaScript
Нужно создать excel на своей web-странице,чтобы выполнялись такие же действия...

Скроллинг через JavaScript
Здравствуйте. Подскажите как можно решить следующую проблему. Есть...

Браузер клиента через JavaScript
Вопрос таков - есть ли средства JScript, позволяющие определить браузер...

Вставка гиперссылки через JavaScript
Здравствуйте. Помогите мне разобраться с парочкой нюансов на JS, а именно:...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
32
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru