使用AngularJS

Question

我試圖從預加載URL Unsplash稱爲圖像預緊從Unsplash隨機圖像：

https://source.unsplash.com/random. 

正如你可以看到這個URL返回隨機圖像的URL。我正嘗試預先加載返回的圖片，但無法獲取所選圖片的返回網址。

var image = new Image(); 
    image.src = 'https://source.unsplash.com/random'; 
    image.onload = function(){ 
     element.css('background', 'url('+ image.src + ') no-repeat center center fixed'); 
    }; 

雖然這適用於Chrome，其中改變的背景圖像不會使一個空白屏幕在加載，在Safari將無法正常工作。

我懷疑Safari網址會在成功事件中再次調用另一個圖片，並且會導致新圖片加載時出現空白屏幕。

我使用AngularJS，有沒有什麼辦法當我打電話隨機URL，我得到一個圖像的返回的URL？

謝謝！

Answer 1

我懷疑（除非有更多的代碼沒有包括在內），這是因爲你沒有將新的Image對象添加到Dom中，所以瀏覽器沒有從非啓動腳本中解釋重定向（301）一個追趕消化的機會。我的做法是：

1. 而不是使用Image對象的，請嘗試使用angular.element
2. 隱藏元素無論您選擇，或者乾脆相對其定位和移動它faaaar關閉帆布
3. 添加該元素到Dom。
4. 使用超時（加$超時到控制器注射器），以便然後訪問解析網址

下面是一些僞代碼：

var elem = angular.element("<img>").src("https://source.unsplash.com/random"); 

// hard-code, or assign a class and style in your stylesheet, etc. 
elem.css({position: 'absolute', "z-index":-1, top: -9999}) 

angular.element("body").append(elem); 

$timeout(function() 
{ 
    // use the raw DOM object's src instead of wrapped (angular) src 
    var url = elem.get(0).src; 

    // do whatever you need to with the URL 

    // get rid of the element after it's been processed 
    elem.remove(); 
}); 

祝你好運！

Answer 2

你可以做這樣的事情：

var image = new Image(); 
image.src = "https://source.unsplash.com/random"; 
$("#somewhere-to-append-the-image").hide(0).append(image); 
image.onload = function() { 

    var img = $("#somewhere-to-append-the-image > img"); 

    // work with the img here 
    $("#somewhere-to-append-the-image").fadeIn(100); 
} 

可悲的是，你仍然不會得到img.attr圖像（「SRC」）或任何方式的實際URL引用同一幅圖像中再次未來。

原因是因爲它是302重定向，並且客戶端腳本無法攔截302重定向，它會自動解析，您無法對此做任何事情。您可以在服務器端讀取302個標頭，這是獲得真實URL的唯一解決方法。所以你必須向你的服務器發出ajax請求，讓它解析302，然後用正確的URL迴應。然後，我寫的上面的代碼仍然可以用於預先加載目的的解決url。

我敢肯定Unsplash已經設置了這樣的目的，因爲我在他們的網站閱讀：

盜鏈不像大多數的API，我們更喜歡通過 API返回的圖片網址直接使用或嵌入您的應用程序 （通常稱爲盜鏈）。通過使用我們的CDN和嵌入 在應用程序中的照片網址，我們可以更好地跟蹤照片意見 並通過這些統計攝影師，爲他們提供 上下文他們的照片是如何受歡迎以及它如何被使用。

https://unsplash.com/documentation

不過我不認爲這是一個有效的用例加載一個隨機圖像，並保持重新使用的URL後，沒有通過他們的JSON API去，所以這就是爲什麼我m建議通過中間的Ajax調用來處理服務器端的302。

把它一步，對Unsplash的偏好，我會在我自己的服務器緩存自己的形象。如果你手動拉取圖像，那絕對是你要做的。在任何時候，他們可能會停止服務，並且您的背景將停止工作。這樣的一點點只是一點保證。也許你可以兩者都做，並用自己的CDN優先於你自己的，但如果他們的服務器出現了乳房它會是不錯的後備。

不要期待通過他們的條款，但並製作自己的電話。

Answer 3

你可以嘗試在angularjs此代碼。它非常簡單並且很好用。

$http({ 
      method: "GET", 
      url: "https://api.unsplash.com/photos/?client_id=YourApplicationID&per_page=30&page="+$scope.pagenumber, 

    }).then(
     function(res) 
     { 
      var totalFound=res.data.length; 
      console.log('totalFound',res); 
      var photo=[]; 

      for(var i=0;i<totalFound;i++) 
      { 
       var full=res.data[i].urls.full; 
       var regular=res.data[i].urls.regular; 
       var raw=res.data[i].urls.raw; 
       var small=res.data[i].urls.small; 
       var thumb=res.data[i].urls.thumb; 

       photo.push({ 
        full:full, 
        regular:regular, 
        raw:raw, 
        small:small, 
        thumb:thumb 
       }); 

      } 
      $scope.photo=photo; 

     }, 
     function(res) 
     { 
      console.log('error',res); 
     }); 

感謝享受...