Javascript 循环图像库
我正在尝试从JSON提要创建一个图像库。下面是我正在使用的代码:Javascript 循环图像库,javascript,jquery,html,json,for-loop,Javascript,Jquery,Html,Json,For Loop,我正在尝试从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.imag
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
目前,该页面不是一个接一个地输出图像->而是将它们全部加载在一起。这反过来又会导致很长的页面加载时间。是否有一种方法可以让图像一个接一个地加载,从而使页面加载时间最小化
提前谢谢
编辑
我刚刚实施了以下措施:
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);
}
for(var i=0;i
这似乎可以很好地让图像逐个加载->但页面加载时间仍然是一样的:(如果您不想在应用程序中引入任意数量的延迟,可以在加载前一个后立即加载下一个:
(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);
(函数加载下一个时间段(i){
if(json&&json.images&&json.images[i]){
var img=新图像(),
image=json.images[i];
img.onload=函数(){
$("尝试使用像LazyLoad这样的库。如果没有,只需将元素添加到dom中,然后在页面加载后加载图像源。问题是浏览器cna最多只能同时处理6个调用,所以在几个批中请求了6个以上的图像。我做了一个“我看不出有任何问题”though@CodeGodie加载图像后,它将被缓存。应该有0个下次显示时加载(就像在小提琴中一样,重复相同的2个图像)。