используя jQuery (поместите внизу страницы) на определенной странице

Из соображений производительности я загружаю скрипты jQuery внизу страницы (перед закрывающим тегом body).

У меня вопрос, как включить скрипты для конкретной страницы? Я не хочу помещать все в метод $ (document) .ready (опять же из-за соображений производительности).

Обновление: я использую систему шаблонов, поэтому я помещаю загрузку jQuery в шаблон. Таким образом, вызовы jQuery не распознаются, даже если я помещаю их в конец определенной страницы, потому что в этот момент jQuery не загружается.

13.10.2009 08:07:30
ты действительно не понимаешь, о чем ты спрашиваешь? Хотели бы вы получить поддержку в режиме реального времени в решении этой проблемы? Затем я предлагаю вам посетить chat.stackoverflow.com/rooms/17/javascript и упомянуть URL-адрес этого поста (как одно сообщение, просто вставьте URL-адрес этого окна), а вы этого не понимаете$(document).ready()
jcolebrand 20.12.2010 21:33:51
8 ОТВЕТОВ

Просто имейте конкретную страницу $(document).ready().

0
13.10.2009 08:11:02

Он $(document).ready()не будет переопределен при использовании его более одного раза, поэтому вы можете загрузить 2 файла сценария, которые оба добавляют функциональность, запускаемую при загрузке документа.

3
13.10.2009 08:19:21

Я не уверен на 100%, что вы спрашиваете, но если это то, о чем я думаю, то ответ таков: вы не можете получить свой торт и съесть его тоже.

Кажется, вы переместили jQuery на кнопку страницы, но у вас есть некоторые элементы страницы, на которых вы хотите использовать JavaScript, но не хотите ждать document.ready для всех? Может быть, что-то вроде следующего?

<html>
<body>
   <ul id="maybe-some-menu-that-needs-js-initialization-for-example">
   ...
   </ul>
   <script>
     /* javascript goes here that uses jquery for the above menu (or whatever) 
     AND you don't want to wait for document.ready for this to happen */
   </script>
   ...
   <script src="including jquery here"></script>
   <script src="including other scripts here"></script>
</body>
</html>

Если это так, то обратитесь к тому, что я сказал с самого начала. Вам нужно переместить jQuery (по крайней мере, библиотеку, не обязательно весь ваш другой JavaScript) обратно в верхнюю часть страницы. Либо так, либо не используйте jQuery для вещей, которые вы не хотите ждать для document.ready.

Редактировать: Если вы хотите выполнять действия, основанные на вашей странице, то есть два метода, каждый лучше и предпочтительнее, чем последний.

  1. Используйте, location.pathnameчтобы определить, какая функциональность вам нужна.
  2. Организуйте свой JavaScript в отдельные модульные файлы по их функциональности и включайте только те, которые необходимы для конкретной страницы.
4
13.10.2009 21:39:07
Я знаю, что это невозможно, но есть ли другой способ выполнять действия только на определенных страницах?
Strudel 13.10.2009 09:40:00
^^ что-то вроде if (page_003), тогда вызывать method3?
Strudel 13.10.2009 09:41:09
Вот пример того, что я имею в виду: artzstudio.com/2009/04/jquery-performance-rules/…
Strudel 13.10.2009 11:06:50
Я не совсем уверен, что вы подразумеваете под location.pathname. Вы можете объяснить это немного?
Strudel 15.10.2009 06:20:55
location.pathnameдаст вам путь к странице. Например, для этой страницы это"/questions/1558816/using-jquery-put-at-the-bottom-of-the-page-on-specific-page/1559027"
Justin Johnson 15.10.2009 07:25:03

используя $(document).ready, не имеет значения, где на странице он находится, так как он будет выполняться только после завершения загрузки DOM. Единственный код, который должен входить внутрь, $(document).ready- это код, который необходимо настроить после загрузки DOM, например, обработчики событий, любые эффекты / анимации, которые вы хотите запустить, как только DOM завершит загрузку, и т. Д. Другие функции не нужны чтобы быть в $(document).ready, например, функции , используемой при сортировке массива, названные функции вызываются , когда события возникают, и т.д.

Как уже было отмечено, вы можете иметь более одной $(document).readyфункции на странице, поскольку вы указываете функцию (именованную или анонимную), которая будет выполняться при возникновении readyсобытия (события jQuery).

РЕДАКТИРОВАТЬ:

Эта статья, на которую вы ссылаетесь в комментариях к этому ответу, содержит пример того, чего вы пытаетесь достичь. Например, у вас будет файл JavaScript со следующей настройкой для объявления глобальной переменной

var myPageLibrary = {
    homePage : {

        init : function() {
            $(document).ready(function() {
                /* page specific functions that need to run,
                   for exmaple, binding event handlers, etc */
            });
        }
    },
    aboutPage : {
        init : function() {
            $(document).ready(function() {
                /* page specific functions that need to run,
                   for exmaple, binding event handlers, etc */
            });
        }
    }
}

/* you might have functions here that are bound to events. 
   Here is an example */

function showSubMenu(e) {
    $(e.target).next('div').show();
}

function hideSubMenu(e) {
    $(e.target).next('div').hide();
}

Тогда на ваших страницах у вас будет следующая структура (в этом примере используется домашняя страница)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>This is my Home Page</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="path-to-myPageLibrary.js"></script>
<script type="text/javascript">
    myPageLibrary.homePage.init(); 
</script>
</head>
<body>
  <!-- Page content -->
</body>
</html>

сначала ссылка на файл сценария jQuery, затем файл сценария myPageLibrary, а затем вызов блока сценария myPageLibrary.homePage.init();

3
23.05.2017 12:15:00
Я знаю об этом. Проблема в том, что вы помещаете библиотеку jQuery внизу страницы. Таким образом, код jQurey не будет распознан, если он где-то выше.
Strudel 13.10.2009 09:43:55
Да, на скрипт jQuery необходимо ссылаться перед любым кодом, который его использует. Это то же самое для любой функции JavaScript, которая является свойством глобального объекта (как и jQuery) - ее необходимо объявить, прежде чем вы сможете ее использовать
Russ Cam 13.10.2009 09:59:06
РЕШЕНИЕ

Это позволяет вызывать JQuery плагин методов в теле и загрузка JQuery плагин на нижней части страницы headjs

1
24.03.2011 15:02:03
Привет @ Strudel, я действительно смущен твоим ответом **. Можете ли вы приложить немного больше усилий, чтобы объяснить, что вы подразумеваете под этой ссылкой? Вы имели в виду, что вы приняли этот ответ?
jcolebrand 20.12.2010 21:31:24
Привет @drachenstern, извините за дерьмовый ответ. Это позволяет вам вызывать методы плагина jQuery в теле и загружать плагин jQuery внизу страницы.
Strudel 24.03.2011 13:10:24

Вы пробовали "скрипт @section"? Это автоматически добавит коды в конце страницы, таким образом, у вас могут быть скрипты jQuery для конкретной страницы.

@section scripts {
<script>
 jQuery(document).ready(function () {
//put your jQuery codes here
});
</script>
}
0
9.06.2011 20:02:00
В этом вопросе ничего не говорится об использовании ASP.NET, к которому это относится @sectionконкретно
acjay 20.11.2012 02:31:06

Если я правильно понимаю, вам нужно поместить некоторый код javascript, который вызывает jquery, в середину вашей страницы. Но ваш JQuery включает в себя в нижней части тела. Вы можете сделать это, вызвав jquery в событии window.load. Это событие возникает после загрузки и выполнения всех асинхронных сценариев. например:

<body>
    <script>
        $("#myElem").val(); // fails, "$" not defined
        window.addEventListener("load", function(evt) {
            $("#myElem").val(); // ok, jquery is loaded
        });
    </script>
    <span id="myElem>hi</span>
    <script src="//cdn.jquery.com"></script>
</body>
2
15.09.2016 04:39:25

Как я понимаю вашу проблему:

  1. jQuery недоступен на странице до загрузки.
  2. Вы используете шаблоны, и у каждого есть свой JS-код для запуска при загрузке страницы
  3. Вы хотите, чтобы они работали с JQuery.

Если я вас правильно понял, вот решение:

  1. В <head>массиве глобальных задач:

        ...
        <script>
            const JQUERY_READY_TASKS = []
        </script>
    </head>
  2. После загрузки jQuery и других скриптов определите:

        ...
        <script>
            jQuery(document).ready(() => {
                // Execute all tasks added by templates
                for (let n=0; n<JQUERY_READY_TASKS.length; n++)
                    JQUERY_READY_TASKS[n](jQuery)
                }
            });
        </script>
    </body>
  3. Оберните код инициализации ваших шаблонов в функции:

        ...
        <script>
            // Within template
            JQUERY_READY_TASKS.push(($) => {
                // Template init code
                // You can use $ as jquery here
            })
        </script>
        ...
0
14.02.2020 23:12:53