Question

我正在尝试预加载从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 URL会在成功事件中再次调用另一个图像，并且会为新图像加载设置空白屏幕。

我使用的是AngularJS，当我调用随机网址时，有什么方法可以获得图片的返回网址吗？

谢谢！

Answer 1

您可以在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);
        });

谢谢享受...

Answer 2

我怀疑（除非你没有包含更多代码）这是因为你还没有将新的Image对象添加到Dom，所以浏览器没有解释从unsplash重定向（301），并给Angular一个机会赶上摘要。我的方法是：

请尝试使用angular.element
隐藏您选择的元素，或者只是相对定位它并将其从画布上移开
将该元素添加到Dom。
使用超时（向控制器注入器添加$ timeout）以获得对已解析URL的访问权限

这里有一些伪代码：

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 3

您可以这样做：

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（＆＃34; src＆＃34;）中获得图像的真实网址，或者在将来再次引用同一图像。

原因是因为它是302重定向，并且客户端脚本无法拦截302重定向，它会自动解决，您无法做任何事情。您可以在服务器端读取302标头，这是获取真实URL的唯一解决方法。因此，您必须向服务器发出ajax请求，让它解析302，并使用正确的URL进行响应。然后我写的上面的代码仍然可以与解析的url一起用于预加载目的。

我非常确定Unsplash是故意这样设置的，因为我在他们的网站上看到了：

热链接与大多数API不同，我们更喜欢返回的图片网址要直接使用或嵌入应用程序的API （通常称为热链接）。通过使用我们的CDN和嵌入您的应用中的照片网址，我们可以更好地跟踪照片视图并将这些统计数据传递给摄影师，为他们提供他们的照片有多受欢迎以及如何使用它的背景。

https://unsplash.com/documentation

但是我确实认为有一个有效的用例来加载随机图像，并保留URL以便以后重复使用，而无需通过他们的JSON API，这就是我建议的原因通过中间Ajax调用处理服务器端的302。

为了更进一步，针对Unsplash的偏好，我会将他们的图像缓存在我自己的服务器上。如果你手动拉动他们的图像，这绝对是你要做的。在任何时候，他们都可以降低他们的服务，你的背景将停止工作。这样的小事只是一点点保证。也许你可以同时使用他们的CDN而不是你自己的CDN，但如果他们的服务器出现问题，那么回退会很不错。

请仔细查看他们的条款并自己打电话。

使用AngularJS从Unsplash预加载随机图像

3 个答案: