2

我编写了一个图片库。任何图像上的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); 
 });
4

2 回答 2

1

先回答next问题。

如果您一次加载图像。

这是 jsFiddle。

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

在这里获取您的 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.
      });
})

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

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

回答第一个问题

正如我在您之前的问题 IMO 中已经说过的那样，这取决于您一次加载多少张图片。告诉我你装了多少？

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

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

问题 1。

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

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

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

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

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

浏览器会缓存图片吗？

你如何在Javascript中缓存图像

谷歌链接

于 2013-07-28T05:44:29.617 回答
0

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

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

这也将使您有可能拥有您提到的加载微调器。让我知道这是否有帮助。

于 2013-07-27T21:31:52.267 回答