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

Question

i created a gallery model html page with images loading from json . But its taking too much time to load images, is there any way to make this asynchronous.

Iam loading almost 200 - 400 images in this json format

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

This is my html code

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

This is my js code where i used to parse json and load image

   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);


        }


        }
    }
});

};  

Is there any better method load image faster from url ?

Answer 1

I would bind on document scroll (when almost reach bottom) to run AJAX request and limit image return from PHP into 25 or 50 images per request. Also, I use ajax qeueuing.

To make it pretty, use preloading imgvar variable and put loading animation at center of image element. On imgvar load, update image element src with imgvar.src.