jquery - 使用 jQuery 从 Flickr 获取图像的高度而不加载图像文件？

Question

我目前正在开发一个 jQuery 解决方案，我想从 Flickr RSS 源加载图像。不过，我对从提要中获得的默认大小并不满意 - 我希望加载的图像等于或高于我在其中显示它们的包装元素的高度。(宽度在这里不是问题。)

根据他们的API documentation ，Flickr 有一个图像尺寸系统，如下所示:

s   small square 75x75
t   thumbnail, 100 on longest side
m   small, 240 on longest side
-   medium, 500 on longest side
z   medium 640, 640 on longest side
b   large, 1024 on longest side*
o   original image, either a jpg, gif or png, depending on source format

* Before May 25th 2010 large photos only exist for very large original images

这意味着没有保证的高度 - 我需要检查要加载的每个图像的高度。举个例子:如果图像是全景图并且我加载了大尺寸，则高度可能仍然不足以填充我的包装元素。这是因为最长的边将是宽度，它将是 1024。

让事情变得复杂的是，包装器的高度可能会发生变化 - 不是在页面加载后动态变化，而是在页面之间变化。在某些页面上它是 300 像素，在其他页面上它是 100 像素等等。

据我所知，获取图像文件高度的唯一方法是实际加载它。因此，我编写了一些加载图像的递归代码，查看其高度，如果不够，它会再次调用自身来加载下一个尺寸。在当前版本中，它从最小尺寸开始，一直向上直到找到合适的图像或可能的最大图像。

代码如下:

$.getJSON(ajaxContentURL, function(data) {
        var flickrImages = [];

        // An array of object with data pertaining Flickr's image sizes
        var flickrImageSizes = [{ size: "small square", pixels: 75, letter: "_s" }, 
                                { size: "thumbnail", pixels: 100, letter: "_t" }, 
                                { size: "small", pixels: 240, letter: "_m" }, 
                                { size: "medium", pixels: 500, letter: "" }, 
                                { size: "medium 640", pixels: 640, letter: "_z" }, 
                                { size: "large", pixels: 1024, letter: "_b"}];

        $.each(data.items, function(index, item) {
            flickrImages.push(loadFlickrImage(item, 0));
        });

        function loadFlickrImage(item, sizeIndex) {
            var path = item.media.m;
            var imgSrc = path.replace("_m", flickrImageSizes[sizeIndex].letter);
            var tempImg = $("<img />").attr("src", imgSrc);

            tempImg.load(function() {
               // Is it still smaller? Load next size
               if (this.height < el.data("scrollableAreaHeight")) {
                    // Load a bigger image, if possible
                    if ((sizeIndex + 1) < flickrImageSizes.length) {
                        loadFlickrImage(item, sizeIndex + 1);
                    } else {
                        return this;
                    }
               else {
                    return this;
               }
            });
        }
});

虽然边缘有点粗糙，但我希望你能明白。

这可行，但为了获得正确的尺寸而必须加载如此多版本的图像似乎太浪费了？

您有任何改进建议吗？我认为应该首先对最佳尺寸进行合理的猜测并首先加载它。然后它会查看它是否适合，或者是否太小或太大，并按尺寸比例加载下一个或上一个图像。这样您就可以减少加载的图像数量以获得正确的尺寸。

更好的是:有没有一种方法可以在不加载实际图像文件的情况下找出图像大小？请记住，我无法访问完整的 Flickr API - 我只是访问 JSON 源 like this one .

如有任何反馈，我将不胜感激!

提前致谢!

Answer 1

也许我对问题的理解是错误的，但也许在html中设置高度，然后通过jquery调整大小到最大的最佳尺寸？加载所有图像中最大的实际尺寸会很浪费，但这比多次加载图像要好。

对于html设置，只要记住尽可能小的图像即可防止空白填充。当然，设置一个维度将允许另一个维度自行设置。如果裁剪是一个问题，一个技巧是设置包装器和溢出的大小:隐藏。

对于 jquery 调整大小，鉴于图像不会立即加载，观看者很可能会看到图像大小发生变化，这并不理想。除非你将它们隐藏起来，直到加载、调整大小，然后显示。