27589


現在、Monacaを利用したスマホアプリ開発を行っており、いくつかのページで  
読み込み完了した時点で走らせたいロジックがあるのですが  
どうやって取得するのかわかりません。

今までこの手は、$(window).load(function(){} で大体なんとかなりましたが  
今回は ons-navigator にある ons-page 内の処理となり同じ手が使えないので  
質問した次第です。

知りたいのは以下の２パターンです。

1.iframe内の外部サイト読み込み完了時  
2.imgの読み込み完了時


CC BY-SA 3.0
2016-07-13T02:09:05.977
27587
2016-07-13T02:46:50.053
17063
question
javascript monaca html jquery onsen-ui
読み込み完了の取得について


[OnsenUIの初期化について](https://ja.onsen.io/v1/guide.html#UsingOnsenUIwithAngularJS)  
どのように実装しているか分かりませんがAngularJSから呼び出している場合は  
下記のようにすることでOnsenUIの初期化終了イベントを取得できます。

[code]

      module.controller('PageController', function($scope) {
        ons.ready(function() {
          // Init code here
        });
      });
    
[/code]

* * *

**iframeの初期化について**

iframeにはonloadイベントがあるので  
windowではなくiframeにloadを置いたらどうでしょうか？  
本家SOの[こちら](https://stackoverflow.com/questions/3142837)も参考になるかと思います。

[code]

    var iframe = document.getElementById("iframe");
    iframe.onload = function () {
        alert("iframe on laad.");
    }
    
[/code]

* * *

**画像の初期化について**  
画像のソースを動的に変更するのであれば、スクリプト内で読み込み出来たか確認しましょう。  
静的なものであれば、上記のiframeと同じ対処でもいいと思います。

[code]

    $(window).load(function() {
      console.log("start : " + (+new Date()));
      $("#target").attr({
        "src":"http://dummyimage.com/2000x2000/000/fff"
      }).one("load", function() {
        console.log("load complete : " + (+new Date()));
      }).each(function() {
        if(this.complete) $(this).load();
      });
    });
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <img id="target" src="">
[/code]


CC BY-SA 3.0
2016-07-13T02:46:50.053
27589
2016-07-13T02:46:50.053
2017-05-23T12:38:55.307
-1
27587
answer