Javascript 在图像库中使用ajax加载图像

我已经编写了一个图像库。任何图像上的

onclick

事件将在模式窗口中加载图像。目前，只需替换

img

标记的

src

属性值即可加载图像

我的问题是：我可以使用ajax加载图像吗？这样做是否会以任何方式提高性能（即最小化加载时间）

我的下一个问题是：我想在浏览器等待新图像加载时使用微调器，单击模式窗口的“下一步”按钮。我不知道怎么做。任何建议都会有帮助

这是我的图片库的一半

我用于加载图像的jquery代码：

 $('.gallery a').click(function(evt) {
 var imgPath = $(this).attr('href');
 $('.gallery-overlay').find('.gallery-image').attr('src',imgPath); 
 });

---

我曾经使用过类似的代码片段：

var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
    .load(function() {
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
            alert('broken image!');
        } else {
            $("#something").append(img);
        }
    });

var img=$（“
这也可以让您拥有您提到的加载微调器。如果有帮助，请告诉我。
先回答
下一个
问题

如果您立即加载图像


如果您使用ajax，则应实例化此函数以加载图像，这将显示ajax微调器，直到加载图像


jQuery

//Assuming gallery-overlay is id of the div where you are showing image.

$(function(){
     $("#gallery-overlay").html("<img src='ajax-spinner.gif'>");
     $.post(url,{variable:variable},function(data){
            $("#gallery-overlay").html(data);
                //data is whatever your php file returns. The ajax-spinner will be there till this appends the html returned by your php file.
      });
})

//假设gallery overlay是显示图像的div的id。
$（函数（）{
$（“#图库覆盖”）.html（“”）；
$.post（url，{variable:variable}，函数（数据）{
$（“#图库覆盖”）.html（数据）；
//数据是php文件返回的任何内容。ajax微调器将一直存在，直到它附加php文件返回的html。
});
})

PHP

//Post variables

//Get the src and image details from table.
$src = $row['src-in-db'];
$alt = $row['alt-in-db'];
$width = $row['width-in-db'];
$height = $row['height-in-db'];
//Echo the html code for #gallery-overlay.

    echo "
    <img src='".$src."' width='".$width."' height='".$height."' alt='".$alt."'>
    ";

//Post变量
//从表中获取src和图像详细信息。
$src=$row['src-in-db']；
$alt=$row['alt-in-db']；
$width=$row['width-in-db']；
$height=$row['height-in-db']；
//回显#gallery overlay的html代码。
回声“
";

然后对于next和prev按钮，您将不需要您在小提琴中完成的jQuery，您将需要另一个php文件来发送图像html

对第一个问题的回答

正如我在你之前的问题中所说的，依你一次加载多少图像而定。告诉我你加载了多少图像

您还完成了jQuery的部分和全部，因此我建议暂时不要使用ajax。如果您也要加载大约20-25个图像

这里有一些你必须看到的问题


（这些答案足以回答您的第一个问题）

由于这是一个图像库，我确信你会在模式窗口外的预览中显示图像，对吗

这样就完全不需要使用ajax，因为图像是由浏览器缓存的

结论：不要使用ajax。让它成为您已经做过的事情。只需为esc按钮添加关闭按钮或事件处理程序来关闭模式窗口

按浏览器增加img缓存的最大使用年限



我的整个网页中有大约50幅图像。我使用的代码是samller大小的拇指图像作为预览显示。单击后，较大尺寸的原始图像将加载到模式窗口中。我还需要远离ajax吗？如果我远离ajax。我很确定，当单击模式窗口中的“下一步”按钮时，browser将花费时间加载下一个100kb（大尺寸图像）。使用此技术，如何在浏览器下载下一个100kb图像时插入微调器？是的，您仍然应该远离ajax，我认为大小在缓存图像时并不重要。请查看此处以最大限度地延长缓存时间。添加微调器也是为了回答这个问题。@Shubendra我添加的第一个链接现在包含有关预加载图像的信息。执行此操作。已添加一个谷歌链接。希望有帮助。它显示了很多关于cachingi的东西，我不想预加载所有的图片。现在我喜欢它的方式。我只想在模式窗口中单击下一步按钮时显示微调器。你能建议我如何在当前实现中添加微调器吗