さんまがおいしい季節だねー(´・ω・`)

script.onloadを使ってJavaScriptがロードされた時の処理を記述する

JavaScript — タグ: — さくら @ 2010/07/06 17:42

先日書いた<script>タグのasync属性を使わずに非同期でJavaScriptを読み込む方法では、非同期で JavaScript を読み込んだ際に読み込みが完了したかのチェックを setTimeout でポーリングしてたのですが、script.onload と script.onreadystatechange で実装する方法についても説明しときます。

まず先日のコードのおさらいです。以下の myfunc.js を非同期で読み込みます。

// myfunc.js
function myfunc() {
    alert('myfunc was loaded!');
}
setTimeout(function() {
    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    head.appendChild(script);
}, 0);

(function() {
    if (typeof(myfunc) == 'undefined') {
        setTimeout(arguments.callee, 15);
        return;
    }
    myfunc();
})();

このように setTimeout を使って script を head に入れると JavaScript の読み込みは非同期になります。

myfunc.js で定義される関数はファイルの読み込みが完了しないと存在しないので、呼び出す前にチェックしないといけません。そのチェックを setTimeout と arguments.callee でしてますた。

前回までの 24 は以上。

今回の 24 は大統領が暗殺され…じゃなくて、上のコードを script.onload と script.onreadystatechange で書き換えます。

var initialized = false;
var script_onload;

setTimeout(function() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'myfunc.js';
    script.onload = function() {
        if (!initialized) {
            initialized = true;
            script_onload();
        }
    };
    script.onreadystatechange = function() {
        if (!initialized) {
            switch (script.readyState) {
            case "loaded":
            case "complete":
                initialized = true;
                script_onload();
                break;
            }
        }
    };  

    var head = document.getElementsByTagName("head")[0] ||
               document.documentElement;
    head.appendChild(script);
}, 0); 

if (initialized) {
    myfunc();
} else {
    script_onload = function() {
        myfunc();
    };
}

超長ったらしくなった\(^o^)/

ブラウザ上の処理はこっちの方が明らかに軽いのですが、配信元サーバの関係でファイルサイズの方が気になる場合は onload/onreadystatechange じゃなくて setTimeout で書いた方が良いかもしれません。

onload と onreadystatechange 両方記述してるのは IE だと onload が動かんからで、クロスブラウザ対応みたいな感じです。

ちなみに、非同期でスクリプト読み込むなら JSLoader | labs.37to.net というライブラリが使えます。ポックンの方はあんま外部のライブラリ使える状況じゃないのでこういう流れになってるんすが、その辺はおいおい明らかになるはずす…


刮目せよ!(c)ゆーすけさんたまりあ

またまた続く

18件のコメント »

  1. This can be a very good site, thank you so much due to this.

    I had created to be able to google and yahoo pertaining
    to a number of time to get the following area.
    I personally do not like while each time I really google with regard to content for you to undergo I usually learn worthless articles in
    addition to a substantial amount of junk mail.
    Everyone evidently you need to take caution with all the junk
    mail plus carry your site fresh and also high class.

    Can you have suggestions for my very own blog site?

    コメント by Arden — 2013 年 7 月 13 日 @ 11:28
  2. As the admin of this site is working, no hesitation very shortly it will be famous, due to
    its quality contents.

    my blog: http://maritimeconnect.me

    コメント by http://maritimeconnect.me — 2014 年 6 月 15 日 @ 18:44
  3. Howdy! This blog post could nnot be written much better!
    Reading through this article reminds me of my previous roommate!
    He constantly kept tapking aboout this. I’ll send this article to him.Pretty
    sure he wiol have a good read. Thanks foor sharing!

    コメント by Dorthy — 2014 年 9 月 5 日 @ 01:08
  4. We’re a gaggle of volunteers and starting a new scheme in our community.
    Yourr ssite provided us with helpful info to work on. You’ve done
    an impressive job and our entire group might be grateful
    to you.

    コメント by Monique — 2014 年 9 月 25 日 @ 09:00
  5. Thanks for another informative blog. Where else may I geet that
    type of info written in such an ideal method?
    I have a venture that I’m just now operating on, and I’ve ben onn the glance ouut for
    sujch info.

    コメント by Rudolf — 2014 年 10 月 18 日 @ 02:50
  6. Excellent post. I used to be checking continuously this weblog and I’m inspired!

    Very useful information specifically the final phase :) I handle such information much.
    I was seeking this certain information for a long time.

    Thank you and good luck.

    コメント by caloblock plus 8 — 2015 年 6 月 27 日 @ 00:46
  7. This site was… how do I say it? Relevant!!
    Finally I’ve found something that helped me. Kudos!

    コメント by job — 2015 年 11 月 2 日 @ 17:17
  8. This design is incredible! You certainly know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start
    my own blog (well, almost…HaHa!) Excellent job. I really enjoyed what you had to say, and more than that, how you presented it.

    Too cool!

    コメント by 拯救硬碟 — 2016 年 10 月 28 日 @ 16:01
  9. Sure I would love more space and a big yard but I knew
    if either my husband or myself lost our job we would be in big trouble.
    You should get started by understanding and avoiding some common Denver real estate agent myths.
    With more kids going into the place, unsecured smaller-sized cottages are being changed to create way for larger houses that come with contemporary benefits.

    コメント by hill top hale — 2016 年 11 月 10 日 @ 21:35
  10. Hi it’ѕ me, I am aⅼso visiting thiѕ web site on ɑ
    regular basis, tɦis web paɡe is genuinely fastidious аnd
    the usеrs aгe actuаlly sharing gߋod thοughts.

    コメント by friv 1000 — 2016 年 12 月 5 日 @ 15:06
  11. Gret post.

    My blog – emf protection products (quantum-neutralizer.com)

    コメント by quantum-neutralizer.com — 2016 年 12 月 10 日 @ 21:01
  12. Thanks for your own effort on this wweb site. Gloria enjoys carrying out investigations
    and it is simple to grawp why. All of us learn all off the
    dynamic means you deliver both useful aand interesting tactics through this web
    blog and therefore encourage response from visitors about thjs subject matter then our
    favorite princess has always been learning a lot of things.
    Have fun with the rest of the year. You have been performing a
    terrific job.

    コメント by Cathy — 2016 年 12 月 27 日 @ 10:20
  13. ขายยาสอด ขายยาเหน็บ
    ยาทำแท้ง
    ติดต่อได้ 24 ชม.
    http://www.ขายยาสอด.com
    0988190748
    0988191257
    ID line : 0988190748

    コメント by ขายยาขับเลือด — 2016 年 12 月 30 日 @ 03:04
  14. I got this web page from my friend who shared with me about this web site
    and now this time I am browsing this web page
    and reading very informative posts at this time.

    コメント by code promo ocarat — 2017 年 1 月 10 日 @ 11:12
  15. ขายยาสอด ขายยาเหน็บ ยาทำแท้ง
    ติดต่อได้ 24 ชม.
    http://www.2planned.com
    0884010904
    0884010605
    ID line : 2planned

    コメント by ยาทำแท้ง — 2017 年 1 月 21 日 @ 04:14
  16. Ratgling instructive and great structure oof content, now that’s uswr friendly (:.

    コメント by electronic drum pattern — 2017 年 2 月 5 日 @ 04:44
  17. Write more,thats all I have to say. Literally, it seems as though you relied on the video to make your point.

    You clearly know what your talking about, why throw away your intelligence on just
    posting videos to your site when you could bbe giving us something enlightening to read?

    コメント by private beats — 2017 年 3 月 1 日 @ 03:55
  18. ขายยาสอด ขายยาเหน็บ ยาทำแท้ง
    ยาขับเลือด ru486 cytotec cytolog
    ติดต่อได้ 24 ชม.
    http://www.2planned.com
    0884010904
    0884010905
    ID line : มี 2 ไอดี
    2planned

    コメント by ยาทำแท้ง — 2017 年 3 月 20 日 @ 14:47

この投稿へのコメントの RSS フィード。 TrackBack URI

コメントする

Copyright © 2017 さくらたんどっとびーず | powered by WordPress with Barecity