2016-07-27 8 views
-1

Ich habe eine Seite, die HTML-Blöcke von einer anderen Seite derselben Domäne mithilfe von IDs rendert. Mein aktueller Code:Verwenden von jQuery Laden der Funktion vor dem DOM-Ready

<div id=”testdiv”></div> 
<script> 
jQuery(document).ready(function(){ 
    jQuery('#testdiv').load('/references/embed1.html #testdiv2'); 
}); 
</script> 

Während dies den Inhalt korrekt geladen, gibt es eine sichtbare Verzögerung zwischen dem Laden der Seite und der jQuery Inhalt Laden; Abhängig von den DIV-Inhalten kann es manchmal eine ganze Sekunde dauern, bis es angezeigt wird. Dies liegt natürlich daran, dass die Seite nicht versucht, den HTML-Inhalt bis DOM Ready abzurufen, also habe ich die Ready-Funktion entfernt, aber die Load-Funktion wird nicht ausgeführt. Wenn ich stattdessen einen iFrame verwende, scheint er geladen zu werden, während der Browser den Code ausführt, aber ich verliere die Fähigkeit, nur bestimmte DIV-IDs aufzunehmen, und es ist schwierig, darauf zu reagieren. Sah auf $ .ajax, aber anscheinend benutzt Load .ajax, also sieht es nicht so aus, als würde es einen Unterschied geben.

Einfach ausgedrückt - wie lade ich bestimmte DIV IDs von einer anderen Seite, ohne auf DOM Ready zu warten, ob jQuery, JavaScript, iFrames oder andere Methode? Zweite Frage

Dank

+0

einfach ... entfernen 'jQuery (document) .ready (function() {'. Es sollte in Ordnung * funktionieren, wenn Ihr Code ** genau ist **, wie es ist in Ihrer Frage *. Beachten Sie jedoch, es wird wahrscheinlich immer noch eine Verzögerung, eine, die Sie nicht entfernen können, indem Sie die Notwendigkeit, AJAX, um diesen Inhalt an erster Stelle zu entfernen. –

+0

Warum die Abstimmung unten? Ich sagte Entfernen das Dom Ready hat nicht für mich funktioniert. Außerdem, dieser Beitrag http://StackOverflow.com/Questions/15107074/JQuery-Load-Not-Working gibt das gleiche Problem und die Auflösung ist DOM bereit. – user1754738

+1

Es sollte gut funktionieren. Wenn nicht Das bedeutet, dass Ihr Beispiel in Ihrer Frage nicht mit dem Code übereinstimmt, den Sie tatsächlich verwenden. Die Position des Skripts relativ zum dom-Element ist SEHR wichtig. –

Antwort

-4

Ajax ist nicht sofort, und nichts, was man tun wird sich ändern. Daher wird es immer eine Form von Verzögerung geben. Sie können die Verzögerung reduzieren, indem Sie die Notwendigkeit für $(document).ready() entfernen, aber ich vermute, dass es immer noch nicht genug sein wird, damit es tut, was Sie erhofft haben. genau wie in Ihrem Beispiel

$.get('page.html', function (result) { 
    // note, you may need to use `.filter` rather than `.find` depending on the structure of `result` 
    $('#target').html($($.parseHTML(result)).find('#target2')); 
}); 

oder Code verlassen, wie minus $(document).ready ist und es nach dem Ziel div zu bewegen.

Die einzige Möglichkeit, die Verzögerung vollständig zu entfernen, wäre die Notwendigkeit, $.ajax zu verwenden, indem Sie den HTML-Code direkt in die Seitenserver-Seite einfügen.

-2

document ready wird ausgelöst, bis die ganze Seite geladen wurde, entfernen Sie es einfach und .load() wird aufgerufen, nachdem #testdiv fertig Render auf DOM hatte. hier ist das Beispiel

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

<div id="testdiv"></div> 
<div id="error"></div> 

<script> 
$("#testdiv").load("/references/embed1.html #testdiv2", function(response, status, xhr) { 
    alert("Triggered"); 
    if (status == "error") { 
    var msg = "Err trying to load "; 
    $("#error").html(msg + xhr.status + " " + xhr.statusText); 
    } 
}); 
</script> 

https://jsfiddle.net/Angel_xMu/rer3yuny/1/

Verwandte Themen