发表新帖
发表新帖

load jquery after the page is fully loaded

前端 未结
关注
11 1411
甜味超标
甜味超标 2020-12-31 08:32

I\'m looking for a way to load jquery after the page is fully loaded.
well there are lots of questions and answers about it in here, but all describe how to run a scri

相关标签:
11条回答
  • 轻奢々
    2020-12-31 08:38

    You can either use .onload function. It runs a function when the page is fully loaded including graphics.

    window.onload=function(){
      // Run code
    };

    Or another way is : Include scripts at the bottom of your page.

    0 讨论(0)
  • 感动是毒
    2020-12-31 08:38

    My guess is that you load jQuery in the <head> section of your page. While this is not harmful, it slows down page load. Try using this pattern to speed up initial loading time of the DOM-Tree:

    <!doctype html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <!-- CSS -->
    <link rel="stylesheet" type="text/css" href="">
</head>

<body>
    <!-- PAGE CONTENT -->

    <!-- JS -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script>
        $(function() {
            $('body').append('<p>I can happily use jQuery</p>');
        });
    </script>
</body>

</html>

    Just add your scripts at the end of your <body>tag.

    There are some scripts that need to be in the head due to practical reasons, the most prominent library being Modernizr

    0 讨论(0)
  • 一整个雨季
    2020-12-31 08:38

    I have asked this question more than 6 years ago, and any answers I got had some flaws. Later I myself worked out a solution that I have been using for years since then. Now that I came across my own question again and I saw that it has many views, I'd like to share it because I think it may help others.

    This problem mainly occurs on Master-Detail type of pages (can be old .master and .aspx pages) or (layout and views in asp.net) or any similar situation maybe on other web development languages, however always there is a master-detail pattern involved.

    For the solution, I just add an array at the beginning of my page:

    <script>var after = [];</script>

    any function that requires jQuery or any other script that would run after this section, instead of running it, I just push it to this array:

    after.push(function(){
     // code that requires scripts that will load later,
     //might be for example a jQuery selector or ...
});

    and then at the very end of the page, right before closing the body tag (of course scripts are loaded by now) I run all the functions inside the (here named) after array:

    <script>for(var i=0;i<after.length;i++)after[i]();</script>
</body>

    I find this way very easy, simple and flawless.

    0 讨论(0)
  • 挽巷
    2020-12-31 08:44

    For your problem, the solution might be to attach CDN hosted by google with certain library:

    https://developers.google.com/speed/libraries/devguide

    Also, you can add this at the bottom of page (just before </body>):

    <script type="text/javascript">
(function() {
    var script = document.createElement('script')
    script.setAttribute("type", "text/javascript")
    script.setAttribute("src", "https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js")
    document.getElementsByTagName("head")[0].appendChild(script)
})();
</script>

    However, this is risky in my opinion. You have an asynchronous call for jquery, thus your jquery has to wait until it loads (ie. $(document).ready won't work in this case). So my answer would be: use a CDN like google suggests; put your javascript on the bottom just before </body>; and, ignore flags from profilers.

    0 讨论(0)
  • 忘掉有多难
    2020-12-31 08:47

    Try this:

     $(document).ready(function() {
// When the document is ready
// Do something  
});
    0 讨论(0)
  • 失恋的感觉
    2020-12-31 08:53

    If you're trying to avoid loading jquery until your content has been loaded, the best way is to simply put the reference to it in the bottom of your page, like many other answers have said.

    General tips on Jquery usage:

    1. Use a CDN. This way, your site can use the cached version a user likely has on their computer. The // at the beginning allows it to be called (and use the same resource) whether it's http or https. Example:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    Using a CDN has a couple of big benefits: it makes it more likely that users have it cached from another site, so there will be no download (and no render-blocking). Further, CDNs use the closest, fastest connection available, meaning that if they do need to load it, it will probably be faster than connecting to your server. More info from Google.

    1. Put scripts at the bottom. Move as much of your js to the bottom of the page as possible. I use php to include a file with all my JS resources below the footer.

    2. If you're using a template system, you may need to have javascript spread throughout the html output. If you're using jquery in scripts that get called as the page renders, this will cause errors. To have your scripts wait until jquery is loaded, put them into

      window.onload() = function () { //... your js that isn't called by user interaction ... }

    This will prevent errors but still run before user interaction and without timers.

    Of course, if jquery is cached, it won't matter too much where you put it, except to page speed tools that will tell you you're blocking rendering.

    0 讨论(0)
 看不清?
提交回复
热议问题