Jquery - 获取图像的真实尺寸或在没有 js 的情况下兼容的方法

Jquery - get the real dimension of the image or a way to be compliant if no js

本文关键字：js 情况下 方法 获取 图像 真实 Jquery      更新时间：2023-09-26

Hello上下文是一个库和一个缩略图页面该脚本的目标是最小化缩略图，并在悬停时以原始大小显示它们。脚本做得很好：- 获取缩略图的最小大小- 为所有缩略图定义此最小大小-悬停时增加z索引并将大小定义为此缩略图的原始大小

但是如果禁用JavaScript，那就一团糟了，因为每个缩略图都有自己的大小

如果我通过 CSS 或 html 为所有缩略图定义相同的大小 - 以便在没有 js 的情况下合规 - 脚本会将其作为缩略图的原始大小，而不是图片的实际大小。

代码是：

    <script type="text/javascript">
jQuery(window).load(function(){
var min_dim_width = 10000;
var min_dim_height = 10000;
$("ul.thumbnails img").each(function() {
    $.data(this, 'size', { width: $(this).width(), height: $(this).height() });
            if ($.data(this,'size').height < min_dim_height)
      min_dim_height = $.data(this,'size').height;
    if ($.data(this,'size').width < min_dim_width)
      min_dim_width = $.data(this,'size').width;
});
$(".thumbnails img").each(function () {
    $(this)
      .css('width', min_dim_width+'px')
      .css('height', min_dim_height+'px')
    $(this).parents('li')
      .css('width', min_dim_width+5+'px')
      .css('height', min_dim_height+5+'px');
    }).hover(function() {
    if ($.data(this,'size').height == min_dim_height)
    {
      new_dim_height = min_dim_height*1.2;
    }
    else
    {
      new_dim_height = $.data(this,'size').height;
    }
    if ($.data(this,'size').width == min_dim_width)
    {
      new_dim_width = min_dim_width*1.2;
    }
    else
    {
      new_dim_width = $.data(this,'size').width;
    }
    $(this).parents('li').css({'z-index' : '10'}); /*Add a higher z-index value so this image stays on top*/ 
    $(this).addClass("hover").stop() /* Add class of "hover", then stop animation queue buildup*/
        .animate({
            marginTop: '-'+new_dim_height/2+'px',  
            marginLeft: '-'+new_dim_width/2+'px',
            top: '50%',
            left: '50%',
            width: new_dim_width, /* Set new width */
            height: new_dim_height, /* Set new height */
            padding: '10px'
        }, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
}, function() {
    $(this).parents('li').css({'z-index' : '0'}); /* Set z-index back to 0 */
    $(this).removeClass("hover").stop()  /* Remove the "hover" class , then stop animation queue buildup*/
        .animate({
            marginTop: '0', /* Set alignment back to default */
            marginLeft: '0',
            top: '0',
            left: '0',
            width: min_dim_width, /* Set width back to default */
            height: min_dim_height, /* Set height back to default */
            padding: '5px'
        }, 400);
});
});
</script>

感谢您阅读本文以及我的所有考虑，如果您成功了！我们可以在那里看到它的实际效果：http://www.planete-flop.fr/gallerie/index.php?/category/12

PS：重新表述我的"问题"

嗯...我不知道这是否是你要找的，但是...通常，最好在 HTML 标记本身中设置图像的尺寸......如：

<img src="cheese.jpg" alt="an image" title="whee!" height="100" width="200" />

如果支持，您可以使用 JS 覆盖它。否则，至少您可以获得布局的一些可预测性（即使拇指看起来歪斜）。

希望对您有所帮助！

只需在服务器上找到正确的大小

http://php.net/manual/en/function.getimagesize.php

相关文章：