使用JS从url加载图像,但加载时间太长?

时间:2016-06-06 12:23:18

标签: javascript jquery html json

我创建了一个图库模型html页面,其中包含从json加载的图像。但是它花费了太多时间来加载图像,有没有办法使这种异步。

Iam以这种json格式加载了近200到400张图像

XmlException

这是我的HTML代码

    [
{
"url":"https://newevolutiondesigns.com/images/freebies/cool-wallpaper-5.jpg",
"name":"movie name",
"location":"location"
},
{
"url":"https://images2.alphacoders.com/419/41912.jpg",
"name":"movie name2",
"location":"location2"
},
{
"url":"https://wallpaperscraft.com/image/anonymous_guy_fawkes_mask_mask_machete_99814_602x339.jpg",
"name":"movie name3",
"location":"location3"
},
{
"url":"http://www.wallpaperhi.com/thumbnails/detail/20121108/men%20keanu%20reeves%20actors%201920x1080%20wallpaper_www.wallpaperhi.com_47.jpg",
"name":"movie name4",
"location":"location4"
}
.......
]

这是我用来解析json和加载图像的js代码

<div id="listView" name="listView"> 
//Content loading here from js
</div> 

是否有更好的方法可以更快地从网址加载图片?

1 个答案:

答案 0 :(得分:0)

我会绑定文档滚动(当几乎到达底部时)运行AJAX请求并将图像从PHP限制返回到每个请求25或50个图像。另外,我使用ajax qeueuing。

为了使它漂亮,使用预加载imgvar变量并将加载动画放在图像元素的中心。在imgvar load上,使用imgvar.src更新图像元素src。