获取时间从服务器加载图像到浏览器

Question

我目前正在从数据库中获取图像名称到相册并创建图库。我想在单击缩略图时弹出高清图像。我使用此代码替换特定缩略图弹出窗口中的图像：

 $(".srcimage").click(function(){   //click is triggered in thumbnail img.
        $("#popImage").attr("src", " ");  //name of popup img that should be HD.
        var srcimgs = $(this).attr('name');
        var name = $(this).attr('data-value'); 
        var srcimg = "<?php echo base_url()."content/uploads/images/"; ?>"+srcimgs;   //path of HD image.
        $("#popImage").attr({
            src: srcimg

        }); 
        $('.modal-title').html(name);
    });

但它运行缓慢。也就是说，当第一次单击一个图像的缩略图时，该缩略图的高清图像会正确加载。再次单击另一个缩略图时，弹出窗口显示以前的高清图像并且需要很长时间才能被替换。

我认为这可以通过安排时间从服务器下载图像到浏览器来解决，这样我就可以显示加载到特定缩略图的高清图像尚未加载的时间。

Answer 1

您可以预加载图像。为此，请使用 javascript 创建一个 img 标签，但不要将其插入 DOM

var img = document.createElement("img");

然后在其上设置一个事件监听器，以找出图像何时完全加载

img.addEventListener("loaded", function() {
    // The image is now in the browser's memory. You can insert it
    // into the DOM without any delay
}

然后设置img元素的来源，这将开始预加载

img.src = "http://example.com/someImg.png";

在此之后，再次放置显示加载的逻辑

$("#loading").text("Loading...");

Answer 2

您可以使用图像的加载事件。

 $(".srcimage").click(function() {         

     $("#popImage").prop("src", ""); //Use prop instead of attr
     var srcimgs = $(this).attr('name');
     var name = $(this).attr('data-value');         

     //Show a loading text
     $("#loading").text("Loading...");              

     //Initilize a image 
     var img = new Image();

     //Set SRC
     img.src =  "<?php echo base_url()."content/uploads/images/"; ?>"+srcimgs; //path of HD image.

     //Bind load event handler
     img.onload = function() {
         //When image is loaded set popImage as src              
         $("#popImage").prop("src", this.src);

         //Hide loading
         $("#loading").hide();
     };


     $('.modal-title').html(name);
 });

获取时间从服务器加载图像到浏览器

Get time to load images from server to browser

html

javascript

css

jquery

image