0

Нужно вызывать javascript-код:

  1. после загрузки страницы
  2. при изменении размеров окна браузера

Вот этот код работает для первого случая и почему-то не работает для второго:

$(function() {
  $(window).resize(doSomethingUseful());
});

function doSomethingUseful() {
  $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
}

А вот этот работает для второго случая, но не работает для первого:

$(function() {
  $(window).resize(function() {
    $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
  });
});

См. два тестовых примера ниже - их можно скопипастить, сохранить и запустить.

Какой код будет работать для обоих случаев?

Дополнено из комментариев.

Тестовый пример 1:

<html>
<head>
  <title>resize</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(window).resize(doSomethingUseful());
    });

    function doSomethingUseful() {
      $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
    }
  </script>
</head>
<body>
  <div>hello world :)</div>
  <hr>
</body>
</html>

Тестовый пример 2:

<html>
<head>
  <title>resize</title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {
      $(window).resize(function() {
        $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>');
      });
    });
  </script>
</head>
<body>
  <div>hello world :)</div>
  <hr>
</body>
</html>

2 ответа 2

4

Вы в первом примере не указываете функцию обработчик события size, а вызываете ее. Замените $(window).resize(doSomethingUseful()); на $(window).resize(doSomethingUseful); в первом примере и все заработает.

2
  • 1
    ага и еще надо добавить вызов doSomethingUseful() после загрузки страницы, вот так: <html> <head> <title>resize</title> <script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.6.2/…> <script type="text/javascript"> $(function() { doSomethingUseful(); $(window).resize(doSomethingUseful); }); function doSomethingUseful() { $('body').append('<div>Handler for .resize() called. ' + document.body.clientWidth + '</div>'); } </script> </head> <body> <div>hello world :)</div> <hr> </body> </html> и все работает Ж) Спасибо :)
    – xhr
    3 июл 2011 в 8:27
  • 2
    Если я ответил на Ваш вопрос, то нажмите на серую галочку в кружочке, чтобы отметить данный ответ как правильный. Она находится, под "пальцем вниз" возле начала ответа.
    – GLAGOLA
    3 июл 2011 в 13:50
4

Зачем использовать в подобных случаях jQuery?

window.onresize = func; // при изменении размеров браузера
window.onload   = func; // при загрузке страницы. 

Я понимаю, jQuery многофункционален и удобен, но есть случаи когда он излишен, а творение рук программиста с его использования - огромнейший костыль.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.