Предотвращение ссылок до загрузки jQuery

Как я могу предотвратить ссылки на событие click перед загрузкой jQuery? Причина в том, что у меня есть несколько ссылок, которые делают AJAX-вызовы через jQuery ajax-функции, и если пользователь нажимает их, прежде чем jQuery-структура загружается, функция jQuery-функции jQuery браузера не будет работать и будет следовать ссылкам href = "..." Спасибо.Предотвращение ссылок до загрузки jQuery

Редактировать: Могу ли я использовать это?

<head> 
... 
    <script type="text/javascript"> 
    window.onload = prevCl(); 
    function prevCl() { 
    var links = document.links[]; 
    links.onclick = check(); 
    } 
    function check() { 
    if (typeof jQuery == 'undefined') { 
    return false; 
    } 
    } 
    </script> 
</head>

источник

2010-09-28 Ali

Вы можете попробовать подход UI. возможно, создать предварительный загрузчик. – sheeks06

Я обновил ответ Шона Хогана на примере. Он абсолютно прав, как это сделать. –

Четыре варианта для вас:

Вариант 0

Go чтения Sean Hogan's answer, он отметил, что это может быть сделано с делегацией, и я поставил вместе пример (Doh!) реализация.

Вариант 1

Вы можете сделать href ссылок «#», пока не будет загружена Jquery, а затем (при необходимости) изменить его на то, что это на самом деле должно быть. Вы можете сохранить то, что href должно быть в атрибуте data-, например .:

<a href='javascript:;' data-href='realtarget.html'>blah</a>

Тогда:

jQuery(function($) { 
    $("a[data-href]").each(function() { 
     var $this = $(this); 
     $this.attr("href", $this.attr("data-href")); 
    }); 
});

Опять же, что последний бит, только если вам действительно нужно сделать HREF в HREF. Если вы обрабатываете клик по JavaScript, не нужно.

Если валидация является важной частью цикла разработки, важно отметить, что атрибуты в форме data-xyz являются недействительными в HTML4 и ранее (браузеры действительно не заботятся, но опять же, если вы используете валидацию ...) , Они становятся действительными с HTML5.

Вариант 2

Использование встроенных onclick атрибуты для перехвата нажмите перед JQuery загрузки и в основном «К сожалению, один момент». Таким образом, в script тег в верхней вашего файла:

function sorryLoading() { 
    alert("Sorry, the page is still loading, one moment please."); 
    return false; 
}

... а затем по ссылкам:

<a href='realtarget.html' class='sorry' onclick='return sorryLoading();'>blah</a>

... затем удалить onclick при загрузке JQuery:

jQuery(function($) { 
    $("a.sorry").removeClass('sorry').attr("onclick", "").click(yourRealClickHandler); 
});

(Вы можете оставить последний бит — click вызов —, если они не все имеют один и тот же обработчик щелчка.)

Я использовал класс выше, чтобы различать эти ссылки и другие, которые, возможно, имеют встроенный onclick (в противном случае, удивительно селектор «а [OnClick ] «фактически работает в Chrome, Opera и Firefox для Linux и IE6 и IE8 в Windows).

Вариант 3

Поскольку это звучит, как вы хотите, чтобы страница быть нефункциональной до Jquery нагрузок, здесь другой подход:

Убедитесь, что тег сценария JQuery находится в head (не внизу, где я обычно рекомендую поместить его).
В самом низу вашей страницы, непосредственно перед закрытием тега body, подключите обработчики кликов без, обернув их в звонок jQuery.ready (или любой из его ярлыков).

Причина заключается в следующем: # 1 будет гарантировать, что само по себе Jquery загружается до страницы визуализируемого и # 2 будет подключить обработчики как можно скорее. Google рекомендует использовать тег в конце страницы, подобный этому (вместо функции ready или аналогичной) и говорит, что в этот момент элементы DOM будут готовы к обнаружению.

Отдельно, конечно, вы хотите, чтобы убедиться, что время, в течение которого ссылка не делать то, что ожидает пользователь абсолютно как можно короче делая все оптимизации материала загрузки страницы вы Можно. Нажав на ссылку и не имея ее, сделайте то, что похоже на то, что она делает плохой пользовательский интерфейс.

источник

2010-09-28 09:48:43

Спасибо, но это огромная манипуляция DOM и есть собственные проблемы с SEO и скоростью загрузки страницы. :) – Ali

@Ali: Хороший вопрос о SEO. Я добавил еще один вариант, как вы указали на это. –

спасибо Т. Дж. Но у меня есть feeeeeeeeeeew ссылки, я думаю, что javascript может это сделать, но им не нравится javascript без фреймворков, я пытался написать функцию, но не работал. (Можно ли посмотреть эту функцию в моем вопросе? Я отредактировал это) – Ali

Я не пробовал, но теоретически добавляю обработчик событий без jquery ко всем элементам, которые предотвращают действие по умолчанию (открытие ссылки) до тех пор, пока jquery не установлен?

getElementsByTagNames('a').addEventListener('click',function (event) { 
    if (typeof jQuery == 'undefined') { 
    event.preventDeafault(); 
    } 
},false)

источник

2010-09-28 10:50:15 Hannes

Вы можете использовать событие делегирования: в DOM эквивалент JQuery live() и delegate() методов.

Следующая может работать:

<head> 

<script> 
function linkMatcher(node) { // modify this if not all links are disabled 
if (node.href) return true; 
else return false; 
} 

document.onclick = function(e) { 
e = e || window.event; 
var target = e.target || e.srcElement; 
for (var node=target; node!=document; node=node.parentNode) { 
    if (node.tagName == "A") return !linkMatcher(node); 
} 
} 
</script> 
</head>

EDIT: Это отключает ссылки на постоянной основе. Их можно повторно включить, удалив обработчик событий, например. document.onclick = null.

complete, live example ниже работает на Chrome, Opera и Firefox для Linux, а также IE6 и IE8 для Windows. Это предотвращает клики по ссылкам с классом «wait» (вы могли бы использовать все ссылки, если хотите), и запоминает первую ссылку. Затем он имитирует длительную задержку загрузки (пять секунд), а затем подключает обработчики jQuery по ссылкам и удаляет обработчик уровня документа, который предотвращает клики, а затем запускает обработчик jQuery на ссылку, которая была нажата (обратите внимание, что это только триггеры обработчик, а не базовое поведение по умолчанию —, но поскольку вы хотите запустить свой материал ajax, я полагаю, что все в порядке). — T.J.Crowder

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Link Click Delay Test Page</title> 
<!--[if IE]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<style> 
    article, aside, figure, footer, header, hgroup, 
    menu, nav, section { display: block; } 
    body { 
    font-family: sans-serif; 
    } 
    p { 
    margin: 0px; 
    } 
</style> 
<script type='text/javascript'> 
    // A scoping function to avoid creating global symbols 
    (function() { 
    // Figure out what to hook clicks on 
    var container = 
     document.body || 
     document.documentElement || 
     document; 

    // Hook clicks that reach the bottom level 
    hookClicks(); 
    function hookClicks() { 
     if (container.attachEvent) { 
     container.attachEvent("onclick", handleClick); 
     } 
     else if (document.addEventListener) { 
     container.addEventListener("click", handleClick, false); 
     } 
    } 

    // Set up an unhook function for jQuery to call 
    window.unhookClicks = unhookClicks; 
    function unhookClicks() { 
     if (container.attachEvent) { 
     container.detachEvent("onclick", handleClick); 
     } 
     else if (document.addEventListener) { 
     container.removeEventListener("click", handleClick, false); 
     } 
    } 

    // Handle clicks 
    function handleClick(event) { 
     var target; 

     // Handle Microsoft vs. W3C event passing style 
     event = event || window.event; 

     // Get the target (again handling Microsoft vs. W3C style) 
     target = event.target || event.srcElement; 

     // Do we have a target that's an A with the class "wait"? 
     if (target && 
      target.tagName.toUpperCase() === "A" && 
      (" " + target.className + " ").indexOf(" wait ") >= 0 
     ) { 
     // It's a link we want to prevent for the moment 
     // Remember the element that was clicked if there 
     // isn't already one (or replace it, depends on the 
     // UX you want to provide 
     if (!window.pendingLink) { 
      window.pendingLink = target; 
     } 

     // Prevent it from being processed 
     if (event.preventDefault) { // If W3C method... 
      event.preventDefault(); 
     } 

     // This should work if preventDefault doesn't 
     return false; 
     } 
    } 
    })(); 
</script> 
</head> 
<body> 
    <p><a href='http://www.google.com' class='wait'>Google</a> 
    - This one waits 
    <br><a href='http://news.bbc.co.uk' class='wait'>BBC News</a> 
    - This one also waits 
    <br><a href='http://www.cnn.com'>CNN</a> 
    - This one doesn't wait, it goes immediately 
    </p> 
</body> 
</html>

JavaScript (там, где обработчик JQuery ready есть):

jQuery(function($) { 

    // Use setTimeout to fake a long delay loading 
    setTimeout(function() { 

    // Hook up our proper click handling 
    // Obviously, replace this with whatever does the ajax 
    $("a.wait").click(function(event) { 
     alert("The jQuery handler for " + this.href + " link was triggered."); 
    }); 

    // If we have clicks disabled, enable them 
    if (window.unhookClicks) { 
     window.unhookClicks(); 
     window.unhookClicks = undefined; 
    } 

    // Do we have a pending link to follow? 
    if (window.pendingLink) { 
     // Yes, grab it and clear it 
     var $link = $(window.pendingLink); 
     window.pendingLink = undefined; 

     // Trigger any jQuery event handlers on it. 
     // Note that this will NOT follow the link, 
     // just trigger jQuery event handlers that 
     // are on the link. 
     $link.click(); 
    } 

    // We've loaded! 
    $("<p>Finally loaded!</p>").appendTo(document.body); 

    // End of fake delay function 
    }, 5000); 

});

источник

2010-09-28 10:55:36

** Doh! ** Конечно, перехват кликов на уровне документа во время отображения страницы - это способ сделать это. Я позволил добавить полный, живой пример (и использовать 'attachEvent' /' addEventListener', а не 'onclick'). –

Предотвращение ссылок до загрузки jQuery

ответ

Смежные вопросы