For 循环图像库答案

【问题标题】：For Loop Image GalleryFor 循环图像库
【发布时间】：2014-10-28 20:45:35
【问题描述】：

我正在尝试从 JSON 提要创建图片库。这是我在下面使用的代码：

for (var i = 0; i < json.images.length; i++){
        var image_thumbnail_url = json.images[i].image_thumbnail_url;
        var image_alt_text = json.images[i].image_alt_text;
        var image_category = json.images[i].image_category;
        var image_url = json.images[i].image_url;
        var dealer_company_name = json.images[i].dealer[0].dealer_company_name;
        var dealer_email_address = json.images[i].dealer[0].dealer_email_address;
        var dealer_website_url = json.images[i].dealer[0].dealer_website_url;
        var dealer_phone_number = json.images[i].dealer[0].dealer_phone_number;
        $("#main").append("<img class='thumbnail' src='" + image_thumbnail_url + "' alt='"+ image_alt_text +"' data-image-category='"+ image_category +"' data-image-url='"+ image_url +"' data-dealer-name='"+ dealer_company_name +"' data-dealer-email-address='"+ dealer_email_address +"' data-dealer-website='"+ dealer_website_url +"' data-dealer-phone-number='"+ dealer_phone_number +"'>");
    };

目前该页面没有一张一张地输出图像 -> 它正在一起加载它们。这反过来又导致页面加载时间很长。有没有办法让图片一张一张地加载，这样页面加载时间就最短了。

提前致谢！

编辑

我刚刚实现了这个：

for (var i = 0; i < json.images.length; i++){
        appendImage(json.images[i].image_thumbnail_url, json.images[i].image_alt_text, json.images[i].image_category, json.images[i].image_url, json.images[i].dealer[0].dealer_company_name, json.images[i].dealer[0].dealer_email_address, json.images[i].dealer[0].dealer_website_url, json.images[i].dealer[0].dealer_phone_number)
    };

    function appendImage(image_thumbnail_url, image_alt_text, image_category, image_url, dealer_company_name, dealer_email_address, dealer_website_url, dealer_phone_number) {
        setTimeout(function() {
             $("#gui_sub").append("<img class='gui_thumbnail' src='" + image_thumbnail_url + "' alt='"+ image_alt_text +"' data-image-category='"+ image_category +"' data-image-url='"+ image_url +"' data-dealer-name='"+ dealer_company_name +"' data-dealer-email-address='"+ dealer_email_address +"' data-dealer-website='"+ dealer_website_url +"' data-dealer-phone-number='"+ dealer_phone_number +"'>");
        },300 * i); 
    }

这似乎可以完美地让图像一张一张地加载 -> 但页面加载时间仍然相同:(

【问题讨论】：

尝试使用像 LazyLoad 这样的库。如果没有，只需将元素添加到 dom，并在页面加载后加载图像源。问题是浏览器 cna 最多只能同时处理 6 个调用，因此分批请求超过 6 个图像
我做了一个FIDDLE HERE我没有发现任何问题
@CodeGodie 加载图像后，它会被缓存。下次显示时应该有 0 个加载（就像在你的小提琴中一样，你重复相同的 2 个图像）。

标签： javascript jquery html json for-loop

【解决方案1】：

如果您不想在应用程序中引入任意数量的延迟，您可以在前一个加载后立即加载下一个：

(function loadNextImage(i) {
    if (json && json.images && json.images[i]) {
        var img = new Image(),
            image = json.images[i];
        img.onload = function () {
            $("<img/>", {
                src: image.image_thumbnail_url, // will be cached
                alt: image.image_alt_text,
                'data-image-category': image.image_category,
                'data-dealer-name': image.dealer[0].dealer_company_name,
                'data-dealer-email-address': image.dealer[0].dealer_email_address,
                'data-dealer-website': image.dealer[0].dealer_website_url,
                'data-dealer-phone-number': image.dealer[0].dealer_phone_number
            }).appendTo("#main");
            loadNextImage(++i);
        };
        img.src = image.image_thumbnail_url;
    }
})(0);

【讨论】：