加载时间长 [英] Taking long to load

问题描述

这现在变得非常非常烦人......我在这个问题上坚持了很长时间......问题是加载速度变慢......这是我的代码，我将在底部解释它:

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().Imageconsole.log(snapshot.val().Image)控制台.日志(快照.val())console.log($scope.usernameProfile)var username = $scope.usernameProfileconsole.log($scope.imageProfile)})})console.log($scope.usernameProfile)console.log($scope.imageProfile)}])

这里我从用户的数据中获取 usernameProfile 和 imageProfile ......这里的问题是它加载方式很慢......当我尝试通过传递将其呈现为html时:

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

图像变为空白.. 出于某种原因，html 无法识别 ng-model...也在我上面的代码中，底部的代码首先被记录，然后是快照.val() 中的其他代码.请帮帮我..谢谢

编辑

试过了……还是没用……

 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() {控制台日志($scope.profile.$value)；$scope.imageProfile = $scope.profile.$value});})

编辑

这项工作:

ref.onAuth(function(authData) {console.log("好?)ref.child("UsersAuthInfo").child(authData.uid).on("value", function(snapshot) {$超时(功能(){$scope.usernameProfile = snapshot.val().Username;$scope.imageProfile = snapshot.val().Image控制台.日志(快照.val())});})})console.log($scope.usernameProfile)

第一个说 Good 的，首先被执行，然后是底部，然后是 .child() 中的那个

编辑 3

好吧，坦率地说.在我开始之前，我只是删除了引号并使其更简单...

让我们开始解决 $timeout 的问题...

所以当我测试原始 plunker 的 $timeout 时(更简单的版本......)它工作得很好这是代码:

ref.child('Image').on("value", function(snapshot) {//告诉 AngularJS 我们将对 $scope 进行更改$超时(功能(){$scope.image = 快照.val();控制台.日志(快照.val())});}，函数(错误对象){console.log("读取失败:" + errorObject.code);})

现在，当我尝试将其实现到我的原始应用程序时超时，由于某种原因它没有工作，不幸的是......这是代码......:

ref.onAuth(function(authData){ref.child("UsersAuthInfo").child(authData.uid).on("value", function(snapshot) {//告诉 AngularJS 我们将对 $scope 进行更改$超时(功能(){$scope.imageProfile = snapshot.val().Image;控制台.日志(快照.val())});}，函数(错误对象){console.log("读取失败:" + errorObject.code);})})

现在有了 $firebaseObject...

当我输入此代码时，$firebaseObject 甚至不适用于我的 Simpler 版本的 plunker:

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

它给了我一张空白图片......意味着当 url 不正确时的默认图片......我注意到问题是当我 console.log() $scope.image 像这样:

console.log($scope.image)

我得到一个对象......不是一个值......对象是这样的:

 $$conf: 对象$id: "图片"$优先级:空$value: "http://png.clipart.me/graphics/thumbs/151/man-avatar-profile-picture-vector_151265384.jpg"__proto__:对象

无论哪种方法都将不胜感激

编辑 4:

好的，现在我设法在 plunker 上获取图像(我向您展示的简单 plunker)...这是代码:

var obj = $firebaseObject(ref);obj.$loaded(功能(数据){$scope.image = data.Image},功能(错误){console.error("错误:", 错误);});

但是当我再次尝试在我的实际应用程序上执行此操作时，我仍然无法正常工作！！！这是我正在开发的应用程序上的代码...:

ref.onAuth(function(authData){var obj = $firebaseObject(ref.child("UsersAuthInfo").child(authData.uid));obj.$加载(功能(数据){$scope.imageProfile = data.Image控制台日志(数据.图像)},功能(错误){console.error("错误:", 错误);});})

将不胜感激！

解决方案

Firebase 异步加载数据，这就是你必须附加回调函数的原因:

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 语句可能会很好地写出值，新值绑定到 $scope，但 AngularJS 根本不更新视图.

这可以解决，告诉 AngularJS 需要在下一个更新周期更新视图:

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});})})

或者，您可以使用 AngularFire 来完成相同的任务.

有关详细说明和相关问题列表，请参阅

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)

    }])

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 }}"  >

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

EDIT

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
        });
    })

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)

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

EDIT3

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

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

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);
})

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);
  })
})

Now with the $firebaseObject...

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'));

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

Help would be appreciated in either methods

EDIT 4:

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);
  }
);

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);
    }
  );
})

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
  })
})

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.

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
    });
  })
})

Alternatively, you can use AngularFire to accomplish the same.

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

Update

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)

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

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'

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''" />

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;

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.

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'));

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.

update for EDIT3

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

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

Updated working plunkr: http://plnkr.co/edit/NlDsxdCqUSboZci6T7ES?p=preview

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