使用JS从URL加载图像，但是加载时间太长了吗？

Question

我创建了一个画廊模型html页面，其中包含从json加载的图像。 但是，它花费太多时间来加载图像，因此没有任何方法可以使它异步。

IAM以这种json格式加载近200-400张图像

    [
{
"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"
}
.......
]

这是我的html代码

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

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

   window.onload=function(){

    var output = document.getElementById('listView');
    var i=0;
    var val="";

  $.ajax({
    url: "https://api.myjson.com/bins/2m7gn",
    //force to handle it as text
    dataType: "text",
    success: function(data) {

        //data downloaded so we call parseJSON function 
        //and pass downloaded data
        var json = $.parseJSON(data);
        //now json variable contains data in json format
        //let's display a few items
        for (var i=0;i<json.length;++i)
        {
            if(!document.getElementById('timedrpact'+i))
        {
            var ele = document.createElement("div");
            ele.setAttribute("id","timedrpact"+i);
            ele.setAttribute("class","col-sm-6 col-md-4 box  portfolio-item square");
//            ele.setAttribute("style","background-color:"+arr[i]);
            output.appendChild(ele);


            var ele = document.createElement("a");
            ele.setAttribute("id","a"+i);
            ele.setAttribute("class","a_square");
             ele.setAttribute("href","www.google.com");
            ele.setAttribute("target","_self");
            ele.setAttribute("style","text-decorartion:none");
            document.getElementById("timedrpact"+i).appendChild(ele);

            var ele = document.createElement("img");
            ele.setAttribute("id","img"+i);
            ele.setAttribute("class","img_model");
            ele.setAttribute("style","width:100%;object-fit: cover;");
            ele.setAttribute("src","https://bytesizemoments.com/wp-content/uploads/2014/04/placeholder.png");
            ele.setAttribute("src",json[i].url);
            document.getElementById("a"+i).appendChild(ele);

            var ele = document.createElement("div");
            ele.setAttribute("id","red"+i);
            ele.setAttribute("class","redO");
            document.getElementById("img"+i).appendChild(ele);

            var ele = document.createElement("div");
            ele.setAttribute("id","like");
            ele.setAttribute("class","like"+i); 
            ele.setAttribute("style","background-color:red");
            document.getElementById("red"+i).appendChild(ele);


        }


        }
    }
});

};  

有没有更好的方法可以更快地从url加载图像？

Answer 1

我将绑定文档滚动条（几乎到达底部时）以运行AJAX请求并将每个PHP图像返回限制为25或50。 另外，我使用ajax qeueuing。

为了使其美观，请使用预加载imgvar变量，然后将加载动画放在图像元素的中心。 在imgvar加载时，使用imgvar.src更新图像元素src。