长期服用加载 [英] Taking long to load

问题描述

这是现在变得非常非常非常讨厌...林停留在这个很长一段时间......问题是，它越来越对装载缓慢。这是我的$ C $词将在它的底部解释

This is getting very very very annoying now... Im stuck on this for a long time... The problem is it is getting slow on loading.. This is my code i will explain at the bottom about it:

app.controller('chatCtrl', ["$scope", function($scope) {


        var ref = new Firebase('MYFIREBASEAPP')
        $scope.usernameProfile = ''
        $scope.imageProfile = ''


        ref.onAuth(function(authData) {
            ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
                $scope.usernameProfile = snapshot.val().Username;
                $scope.imageProfile = snapshot.val().Image
                console.log(snapshot.val().Image)
                console.log(snapshot.val())
                console.log($scope.usernameProfile)
                var username = $scope.usernameProfile
                console.log($scope.imageProfile)
            })
        })


        console.log($scope.usernameProfile)
        console.log($scope.imageProfile)

    }])

下面我从用户的数据得到usernameProfile和imageProfile ......这里的问题在于，它加载wayyy慢..当我试图使其通过传递到HTML：

Here i am getting the usernameProfile and imageProfile from the data of the user... The problem here is that it loads wayyy to slow.. that when i try to render it to html by passing:

<img id="profileImage" ng-src="{{imageProfile }}"  >

图片变为空白..出于某种原因的HTML dosent承认NG-模型......也是在我的code以上底部的那些被先登录然后在snapshot.val其他（）。请请帮助我..三江源

The image becomes blank.. for some reason the html dosent recognize the ng-model... also in my code above the ones at the bottom gets logged first then the others in the snapshot.val().. Please Please Help me.. Thankyou

试过这个......还是dosent工作...

Tried this... still dosent work...

   var ref = new Firebase('https://sparke.firebaseio.com/')
    var syncObject = $firebaseObject(ref);

    ref.onAuth(function(authData){
      $scope.profile = $firebaseObject(ref.child('UsersAuthInfo').child(authData.uid).child("Image"));
    $scope.profile.$loaded().then(function() {
        console.log($scope.profile.$value);
        $scope.imageProfile = $scope.profile.$value
        });
    })

修改

这dosent工作：

EDIT

This dosent work:

ref.onAuth(function(authData) {
             console.log("Good?)
  ref.child("UsersAuthInfo").child(authData.uid).on("value", function(snapshot) {
      $timeout(function() {
      $scope.usernameProfile = snapshot.val().Username;
      $scope.imageProfile = snapshot.val().Image
      console.log(snapshot.val())
    });
  })
})

console.log($scope.usernameProfile)

在它说好第一的人，先被执行，然后一个底部然后里面.child一个（）

The one at the first which says Good, gets executed first then the bottom one then the one inside .child()

好吧坦诚。我开始之前，我刚刚删除的报价，并使其更简单...

Ok frank. Before i started, i just deleted the quotes and made it simpler...

让我们开始与$超时的问题...

Lets get started with the problem of $timeout...

所以，当我测试的原始plunker（简单版本...）在$超时它的工作真的没事这是code：

So when i tested the $timeout for the original plunker(the simpler version...) It worked really fine This is the code:

ref.child('Image').on("value", function(snapshot) {
  // tell AngularJS that we're going to make changes to $scope
  $timeout(function(){
    $scope.image = snapshot.val();
    console.log(snapshot.val())
  });
}, function (errorObject) {
  console.log("The read failed: " + errorObject.code);
})

现在有当我试图实现一个我原来的应用程序它没有unforutunately工作，出于某种原因超时......这里是code为..：

Now with the timeout when i tried to implement that to my original app it didnt work unforutunately for some reason... here is the code for that..:

ref.onAuth(function(authData){
  ref.child("UsersAuthInfo").child(authData.uid).on("value", function(snapshot) {
    // tell AngularJS that we're going to make changes to $scope
    $timeout(function(){
      $scope.imageProfile = snapshot.val().Image;
      console.log(snapshot.val())
    });
  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
  })
})

现在的$ firebaseObject ...

Now with the $firebaseObject...

在$ firebaseObject剪掉，甚至为我的plunker的简化版本，当我把这个code工作：

The $firebaseObject didnt even work for my Simpler version of the plunker as when i put in this code:

$scope.image = $firebaseObject(ref.child('Image'));

这给了我一个空白图片...这意味着当URL是不正确的默认图片...我已经注意到，与该问题是，当我CONSOLE.LOG（）的$ scope.image是这样的：

It gave me a blank picture... meaning the default picture when the url is not right... And i have noticed that the problem with that is when i console.log() the $scope.image like this:

console.log($scope.image)

我得到一个对象...不是一个值。该对象是这样的：

I get an object... not a value.. The object is like this:

 $$conf: Object
$id: "Image"
$priority: null
$value: "http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg"
__proto__: Object

帮助将是两种方法pciated AP $ P $

Help would be appreciated in either methods

好了所以，现在我设法让图像在plunker（简单plunker我给你）......这里是code为：

Ok so now i managed to get the Image (The simple plunker i showed you) on the plunker... Here is the code for that:

var obj = $firebaseObject(ref);
obj.$loaded(
  function(data) {
    $scope.image = data.Image
  },
  function(error) {
    console.error("Error:", error);
  }
);

但同样，当我试图做到这一点对我的实际工作应用的IM工作仍然dosent工作！这是在App IM我的code工作...

But again when i tried to do that on my actuall app im working on it still dosent work!!! This is my code on the app im working on...:

ref.onAuth(function(authData){
    var obj = $firebaseObject(ref.child("UsersAuthInfo").child(authData.uid));
    obj.$loaded(
    function(data) {
      $scope.imageProfile = data.Image
      console.log(data.Image)
    },
    function(error) {
      console.error("Error:", error);
    }
  );
})

帮助将AP preciated！

Help would be appreciated!

推荐答案

火力地堡加载数据不同步，这就是为什么你必须附加一个回调函数：

Firebase loads the data asynchronously, which is why you have to attach a callback function:

ref.onAuth(function(authData) {
  ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
    $scope.usernameProfile = snapshot.val().Username;
    $scope.imageProfile = snapshot.val().Image
  })
})

问题是，通过执行回调的时候，AngularJS没有侦听更改了。所以，你的的console.log 语句可能写出来的值精，新值绑定到 $范围，但AngularJS根本就没有更新的意见。

The problem is that by the time your callback is executed, AngularJS is not listening for changes anymore. So your console.log statement probably write out the values fine, the new values are bound to $scope, but AngularJS is simply not updating the views.

这可以是固定的，告诉AngularJS是需要更新其下一个更新周期的观点：

This can be fixed, by telling AngularJS that is needs to update the view in its next update cycle:

ref.onAuth(function(authData) {
  ref.child("Users Auth Info").child(authData.uid).on("value", function(snapshot) {
    $timeout(function() {
      $scope.usernameProfile = snapshot.val().Username;
      $scope.imageProfile = snapshot.val().Image
    });
  })
})

另外，你可以使用AngularFire来完成相同的。

Alternatively, you can use AngularFire to accomplish the same.

有关更详细的解释和相关的问题列表，请参阅Asynchronous访问中火力地堡数组

For a longer explanation and a list of related questions, see Asynchronous access to an array in Firebase

从Plunkr你最少code是：

Your minimal code from the Plunkr is:

var ref = new Firebase('https://angularfireauthtut.firebaseio.com/')
  $timeout(function(){
    ref.child('Image').on("value", function(snapshot) {
    console.log(snapshot.val());
    $scope.image = snapshot.val();
  }, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
  })
})

console.log("For some reason this gets logged first?")
console.log($scope.image)

对于任何一个问题，做的是的唯一code在你的问题，我们可以得到什么地方更快。

For any next question, make that the only code in your question and we can get somewhere faster.

有在这里两个问题，一个是从的console.log（snapshot.val（））输出可见; ：

There are two problems in here, one is visible in the output from console.log(snapshot.val());:

的http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg'

看那些单引号括起来呢？那些不应该在那里，因为你的HTML现在结束了是这样的：

See those single quotes around there? Those are not supposed to be there, because your HTML now ends up like this:

<img src="'http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg''" />

在src是由两个双引号，然后单引号，这意味着它不是一个有效的URL了。

The src is surrounded by both double quotes and then single quotes and this means it's not a valid URL anymore.

正确的解决方案是将存储图像，而不单引号。但现在，这也将工作：

The proper solution is to store the image without the single quotes. But for now, this will also work:

var imgUrl = snapshot.val();
imgUrl = imgUrl.substring(1, imgUrl.length-1);
$scope.image = imgUrl;

第二个问题是，你不提醒的新形象AngularJS。你已经把 $超时在错误的水平，它需要的价值回调里面：

The second problem is that you fail to alert AngularJS of the new image. You've put the $timeout on the wrong level, it needs to be inside the value callback:

ref.child('Image').on("value", function(snapshot) {
  // tell AngularJS that we're going to make changes to $scope
  $timeout(function(){
    var imgUrl = snapshot.val();
    imgUrl = imgUrl.substring(1, imgUrl.length-1);
    console.log(imgUrl);
    $scope.image = imgUrl;
  });
}, function (errorObject) {
  console.log("The read failed: " + errorObject.code);
})

这个片段的工作，并显示您的图片。

This snippet works and shows your image.

在你修复数据，没有周围的图像的单引号价值了，你可以通过使用的 AngularFire ：

Once you fix the data to not have the single quotes around the Image value anymore, you can get rid of most of this plumbing by using AngularFire:

var ref = new Firebase('https://angularfireauthtut.firebaseio.com/');
$scope.image = $firebaseObject(ref.child('Image'));

我强烈建议您使用该库。但是，如果你不这样做，对 $超时（）并继续之前AngularFire的消化循环中读取了。只是复制我的工作片段，而无需学习那些是保证引发同样令人沮丧的经历很快再次。

I highly recommend that you use that library. But if you don't, read up on $timeout() and AngularFire's digest loop before continuing. Just copying my working snippet without learning about those is guaranteed to lead to an equally frustrating experience soon again.

为EDIT3更新

由于您的数据库中包含只是字符串，你需要在你的HTML使用这样的：

Since your database contains just strings, you'll need to use this in your HTML:

<img ng-src="{{image.$value}}"/>

更新工作plunkr： http://plnkr.co/edit/NlDsxdCqUSboZci6T7ES?p = preVIEW

这篇关于长期服用加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！