Menunda skrip jquery sampai yang lainnya dimuat

112

Saya memiliki skrip jquery yang saya perlukan untuk menjalankan hanya sekali semua yang lain di halaman, termasuk beberapa javascript lain (yang tidak saya kendalikan) telah selesai melakukan tugasnya.

Saya pikir mungkin ada alternatif untuk $ (dokumen]. Sudah tetapi saya belum dapat menemukannya.

javascript jquery dom krisma
sumber

217

Anda dapat memiliki $(document).ready()beberapa kali dalam satu halaman. Kode dijalankan sesuai urutan kemunculannya.

Anda dapat menggunakan $(window).load()acara untuk kode Anda karena ini terjadi setelah halaman dimuat sepenuhnya dan semua kode di berbagai $(document).ready()penangan selesai dijalankan.

$(window).load(function(){
  //your code here
});

Jose Basilio
sumber

1

dapatkah saya mengimpor skrip eksternal menggunakan metode ini?

chrism

1

Tentu, jika Anda sudah melakukan ini di dalam $ (document) .ready (), ini tidak akan berbeda.

Jose Basilio

7

Jawaban ini berguna bagi saya karena saya tidak menyadari bahwa kode jquery dijalankan secara berurutan

Sevenearths

1

Terima kasih banyak! Ini memperbaiki masalah .height () saya yang tidak mendapatkan ketinggian yang benar karena halaman (tampaknya) belum dimuat.

Jon

6

Di JQuery 3.0, Anda harus menggunakan sintaks $(window).on('load', function() { });karena $ (window) .load () tidak digunakan lagi.

Alex H

13

Blok kode ini menyelesaikan masalah saya,

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>

Luaskan cuplikan

Agah Toruk
sumber

Bagaimana Anda bisa menjalankan fungsi jQuery untuk melihat apakah jQuery sudah dimuat? Ini hanya akan berfungsi jika jQuery telah dimuat sebelum pemeriksaan.

HelpNeeder

11

Beberapa $(document).ready()akan diaktifkan secara berurutan dari atas ke bawah pada halaman. Yang terakhir $(document).ready()akan menyala terakhir di halaman. Di dalam yang terakhir $(document).ready(), Anda dapat memicu peristiwa khusus baru untuk diaktifkan setelah yang lainnya ..

Gabungkan kode Anda dalam pengendali peristiwa untuk peristiwa khusus baru.

<html>
<head>
<script>
    $(document).on("my-event-afterLastDocumentReady", function () {
        // Fires LAST
    });
    $(document).ready(function() {
        // Fires FIRST
    });
    $(document).ready(function() {
        // Fires SECOND
    });
    $(document).ready(function() {
        // Fires THIRD
    });
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
    $(document).ready(function() {
        // Fires FOURTH
        // This event will fire after all the other $(document).ready() functions have completed.
        // Usefull when your script is at the top of the page, but you need it run last
        $(document).trigger("my-event-afterLastDocumentReady");
    });
</script>

Jason Williams
sumber

3

Dari sini :

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() 
{ 
    if(typeof unsafeWindow.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    } 
    else 
    { 
        $ = unsafeWindow.jQuery; 
        letsJQuery(); 
    } 
} 

GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() 
{
    // Do your jQuery stuff in here    
}

Ini akan menunggu hingga jQuery dimuat untuk menggunakannya, tetapi Anda dapat menggunakan konsep yang sama, mengatur variabel di skrip Anda yang lain (atau memeriksanya jika bukan skrip Anda) untuk menunggu hingga dimuat untuk menggunakannya.

Misalnya, di situs saya, saya menggunakan ini untuk memuat JS asinkron dan menunggu hingga selesai sebelum melakukan apa pun dengannya menggunakan jQuery:

<script type="text/javascript" language="JavaScript"> 
    function js(url){
        s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.getElementsByTagName("head")[0].appendChild(s);
    }       

    js("/js/jquery-ui.js");
    js("/js/jrails.js");
    js("/js/jquery.jgrowl-min.js");
    js("/js/jquery.scrollTo-min.js");
    js("/js/jquery.corner-min.js");
    js("/js/jquery.cookie-min.js");
    js("/js/application-min.js");

    function JS_wait() {
        if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
            typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
            typeof getLastViewedArchive == 'undefined' || // set in application-min.js 
            typeof getAntiSpamValue == 'undefined') // set in application-min.js
        { 
            window.setTimeout(JS_wait, 100); 
        }
        else 
        { 
            JS_ready(); 
        }
    }

    function JS_ready() {
        // snipped
    };

    $(document).ready(JS_wait);
</script>

Chris Doggett
sumber

Ini hanya akan menunggu sampai jQuery dimuat dan mengabaikan aspek lain dari halaman tersebut. Ini tidak lebih dari retasan untuk versi lama dari greasemonkey yang tidak mendukung direktif @require.

Cheekysoft

1

Saya telah menambahkan kode saya sebagai contoh bagaimana saya menggunakan konsep yang sama dengan jQuery untuk menunggu sampai kode lain dimuat.

Chris Doggett

1

Ternyata karena campuran kerangka javascript yang aneh, saya perlu memulai skrip menggunakan pendengar acara yang disediakan oleh salah satu kerangka kerja lainnya.

krisma
sumber

3

Senang karena Anda menemukan solusi tetapi jawaban Anda tidak berguna untuk orang lain tanpa detail lebih lanjut ...

Andrew

1

Sudahkah Anda mencoba memuat semua fungsi inisialisasi menggunakan $().ready, menjalankan fungsi jQuery yang Anda inginkan terakhir kali?

Mungkin Anda dapat menggunakan setTimeout()pada $().readyfungsi yang ingin menjalankan, memanggil fungsi yang Anda ingin beban.

Atau, gunakan setInterval()dan minta pemeriksaan interval untuk melihat apakah semua fungsi pemuatan lainnya telah selesai (simpan status dalam variabel boolean). Saat kondisi terpenuhi, Anda dapat membatalkan interval dan menjalankan fungsi beban.

Richard Clayton
sumber

Saya tidak yakin apa yang Anda maksud dengan ini. Apakah Anda menyarankan agar saya mengimpor semua skrip melalui skrip jquery dan meletakkan skrip saya di urutan terakhir? Jika demikian akan terlihat seperti apa (Saya seorang desainer dengan perdagangan, jadi jangan gunakan kata-kata besar :))

chrism

$ (document) .ready (function () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});

Richard Clayton

skrip lainnya adalah semua file eksternal jadi saya tidak yakin ini akan berhasil, bukan?

krisma

@chrism: Lihat contoh kedua saya. Ini menunggu sampai variabel disetel yang menunjukkan file JS eksternal lainnya telah dimuat sebelum melakukan apa pun. Anda cukup meletakkan kode yang ingin Anda jalankan terakhir di metode JS_ready () saya. Itu persis seperti yang Anda cari.

Chris Doggett

2

Cukup gunakan$(window).load(function(){...})

Ryan Taylor

Menunda skrip jquery sampai yang lainnya dimuat

Jawaban: