Google link

Question

我编写了一个图片库。任何图像上的onclick事件都会在模态窗口中加载图像。目前，仅通过替换src标记的img属性的值来加载图像。

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

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

这是我的图片库jsFiddle

的jsfiddle

我用来加载图片的jquery代码：

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

Answer 1

首先回答next问题。

如果您一次加载图片。

Here is the jsFiddle

如果你使用ajax，这个函数应该被实例化以加载图像，这将显示ajax-spinner直到图像被加载。

Get your ajax spinner here.

<强>的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.
      });
})

<强> 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."'>
    ";

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

回答第一个问题

正如我在上一个问题IMO中所说，这取决于你一次加载多少张图片。告诉我你装了多少？

你还完成了jQuery部分，所以我建议暂时保留ajax。如果您正在加载大约20-25张图像。

以下是您必须看到的一些问题。

Question 1

Question 2。（这些答案足以满足您的第一个问题）

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

然后绝对不需要使用ajax，因为图像是由浏览器缓存的。

结论：不要使用ajax。让它成为你已经完成的。只需为esc按钮添加关闭按钮或事件处理程序即可关闭模态窗口。

通过浏览器增加img缓存的max-age，

Do browsers cache images?

How do you cache an image in Javascript

Google link

Answer 2

我曾经使用类似的东西回到这里，这是代码片段：

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

这也可以让你拥有你提到的加载微调器。如果这有帮助，请告诉我。

在图库中使用ajax加载图像

2 个答案:

Google link