Question

我无法获取通过PHP加载的一系列图片的尺寸。

<?
    $Ldir="imgs/liveGallery/"; // Directory where files are stored

    if ($Lhandle = opendir($Ldir)) {
        while (false !== ($Lfile = readdir($Lhandle))) {
            if ($Lfile != "." && $Lfile != "..") $Lthefiles[] = $Lfile;
        }
        closedir($Lhandle);
    }

    sort($Lthefiles);

    for ($Li=0;$Li<count($Lthefiles);$Li++) { ?>
            <a href="<?php echo $Ldir.$Lthefiles[$Li]; ?>" class="ilightbox">
                <div class="adj">
                    <img src="<?php echo $Ldir.$Lthefiles[$Li]; ?>" class="percent">
                </div>
            </a>
    <?php } 
?>

在上面的代码中，PHP正在加载来自附近目录的所有图像。 .adj类将<div>格式化为正方形并将它们全部浮动到左侧，以便它们平铺屏幕。它也隐藏了溢出，所以无论你看到什么尺寸都是正方形。

我的问题在于尝试读取正在加载到<div>的图像的宽度和高度时出现。我希望图像适合100％的宽度或高度，具体取决于填充方块的比例。这是我认为应该工作的jquery代码。

$(window).load(function() { 
    $(".adj").each(function() {
        var $this = $(this);
        var imageWidth = $this.children("img").attr("width");
        var imageHeight = $this.children("img").attr("height");

        if (imageWidth < imageHeight){
            $this.addClass("aW");
        } else if (imageWidth > imageHeight) {
            $this.addClass("aH");
        }
    }); 
});

根据我上面所写的内容，我似乎根本没有捕捉图像的宽度或高度。

我使用的是fullpage.js和ilightbox.js可能会弄乱我的代码，但我对此表示怀疑。我也尝试将此代码的修改版本放在PHP for循环中（没有jquery每个函数），并且它们也不起作用。帮助！

Here's a link for you.

Answer 1

您可以尝试类似

的内容

$(window).load(function() {
    $(".adj").each(function () {
        var $this = $(this);
        var img = new Image();

        //Set Image source
        img.src = $this.children("img").attr("src");

        //Wait for image to be loaded.
        //Event will fire when image is loaded
        img.onload = function () {
            //Get Height and width
            var imageWidth = img.width;
            var imageHeight = img.height;
            if (imageWidth < imageHeight) {
                $this.addClass("aW");
            } else if (imageWidth > imageHeight) {
                $this.addClass("aH");
            }
        };
    });
});

注意：我不确定，这是最佳做法

Answer 2

您已在css样式中设置宽度和高度，而不是内联为attributes，所以属性width and height是空的

$this.children("img").attr("width"); // .attr would not work

应该是

$this.children("img").css("width"); // .css is the method

和

$(window).load(function() { 

    $(".adj").each(function() {
       var $this = $(this);
       // when your referring same img multiple times, grab it in a variable
       var image = $this.children("img"); 
       var imgWidth =  image.width(); // or image.css("width")
       var imageHeight = image.height(); // or image.css("height")
        if (imageWidth < imageHeight){
           $this.addClass("aW");
        } else if (imageWidth > imageHeight) {
           $this.addClass("aH");
       }
    }); 
});

注意 .css()在px'中给出。

示例100px即使您在pt or em etc中设置了值。在看到您的代码后，我会建议.width() and .height()，因为它们返回整数值并且易于比较

jQuery文档

请注意，.width()将始终返回内容宽度，而不管CSS box-sizing属性的值如何。从jQuery 1.8开始，这可能需要检索CSS宽度加上box-sizing属性，然后在元素具有box-sizing: border-box时减去每个元素上的任何潜在边框和填充。为避免此罚款，请使用.css( "width" )而不是.width()

获取jquery图像宽度并添加类

2 个答案: