0

我正在开发一个 asp.net mvc3 应用程序。我的观点使用剃刀，但我认为现在这无关紧要。我需要一个图片库，您可以在其中删除和上传图片以及我在网上看到的画廊中找不到的其他一些需求，所以我最终自己实现了。

我无法从图库中的拇指显示实际大小的图像。我制作了一个小脚本来显示问题的本质：

<!DOCTYPE html>
<html>
<head>
<style>
.thumb-image { cursor: pointer;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<img src="Forest.jpg" class="thumb-image" alt="Forest"  height="300px" width="300px"/>
<script>
$('.thumb-image').click(function(){
    $(this).hide();//
});
</script>
</body>
</html>

这个小脚本我只是用来检查我是否可以从 DOM 中获取图像（或者更确切地说，如何获取它——我知道这是可能的，只是我掌握了 JS/jQuery 的基本技能）。

所以我的问题是 -Forest.jpg是我桌面上的图像，最初是3550x2377px. 现在我使用桌面上的图像 - 最初图像是从服务器获取的，但即便如此我也不保留任何缓存。标签的样式<img>只是为了实现某种缩略图效果，但图像会以其全尺寸下载到客户端。因此，是否可以在某些<div> tag情况下（在这种情况下3550x2377px）以实际大小显示此图像，而无需额外调用服务器或在我的情况下 - 再次传递图像的路径，但使用缩略图中的图像，是按全尺寸下载的，还是在我更改 CSS 后下载的，width并且height无法再次获得真实尺寸？

4

3 回答 3

1

而不是使用高度和宽度属性使用类并使用 jquery 删除/隐藏类

.thumbimage {
height:300px;
width:300px;
}

$('.thumb-image').click(function(){
    $(this).toggleClass('thumbimage');
});
于 2013-06-07T04:46:36.173 回答
1

通常，img当您只需要显示大图像文件的小版本时，使用指代大图像文件是一种不好的做法。那是因为浏览器还是要完全加载大版的图片，会很慢，然后只显示小版，通常不好看。

网站用户的最佳方式是生成您在img标签中显示的大图像的小版本，然后仅在用户点击时加载大版本。像这样，您的网站将呈现得更快，并且将使用更少的带宽等。

这将是这样完成的：

<img src="Forest_thumb.jpg" class="thumb-image" alt="Forest" />
<script>
jQuery(function($) {
    $('.thumb-image').click(function(){
        $(this).hide();
        $('<img src="Forest.jpg" class="full-image" alt="Forest" />')
            .appendTo('.your-div');
    });
});
</script>

在您的情况下，通过指定宽度和高度使用大图像作为拇指，浏览器已经获取了大图像，因此如果您之后使用大图像，它将不会再次从您的服务器而是从浏览器缓存中获取。

如果您想将大图像保留为拇指并在单击img-Tag 时显示大图像，例如，您可以使用 jQuery 从 img 标签中删除宽度和高度，如下所示：

$('.thumb-image').click(function(){
    $(this).removeAttr('width').removeAttr('height');
});
于 2013-06-07T04:49:20.527 回答
1

在您的 click() 函数中，如果要将图像大小调整为原始大小：

$(this).removeAttr("width").removeAttr("height");

或者，如果您想拥有原始尺寸的图像副本：

var img = $("<img/>").attr("src", $(this).attr("src")).load(function() {

    // your image dimensions:
    pic_real_width = this.width;
    pic_real_height = this.height;

    // show full-size image
    $('body').append(img);
});
于 2013-06-07T04:49:40.717 回答