如何从你的 href 中获取原始尺寸的图像（高度和宽度）并将它们放在你的 attr 上。使用 jQuery

Posted 2023-03-16

【中文标题】如何从你的 href 中获取原始尺寸的图像（高度和宽度）并将它们放在你的 attr 上。使用 jQuery

【英文标题】：How get the original size images (height and width) from your href and put them on your attr. using jquery

【发布时间】：2020-09-15 02:41:42

【问题描述】：

你好朋友，我正在尝试从 hrf 中获取图像的大小（高度和宽度）并将这些值放入其属性中

这让我发疯了

这是我的html：

<figure>
    <a href="image-large-1.jpg">
        <img src="image-small-1.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-2.jpg">
        <img src="image-small-2.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-3.jpg">
        <img src="image-small-3.jpg"/>
    </a>
</figure>

这就是我想要的：

<figure>
    <a href="image-large-1.jpg" original-size="1000x800">   //the sizes  are example
        <img src="image-small-1.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-2.jpg" original-size="1200x700">   //the sizes  are example
        <img src="image-small-2.jpg"/>
    </a>
</figure>

<figure>
    <a href="image-large-3.jpg" original-size="900x980">  //the sizes  are example
        <img src="image-small-3.jpg"/>
    </a>
</figure>

我想从“a hrf”中获取的“original-size”属性

我正在尝试使用在此处找到的代码，我从 href（在 console.log 中）获得了图像的原始大小（在 console.log 中），但我无法在 html 中打印它们

请帮帮我

         $(".containerGallery figure a").each(function() 
                var imgSrc, imgW, imgH;
                function myFunction(image)
                    var img = new Image();
                    img.src = image;
                    img.onload = function()    
                        return 
                            src:image,
                            width:this.width,
                            height:this.height;
                        
                    return img;
                
                var x = myFunction($(this).attr('href'));
                x.addEventListener('load',function()
                    imgSrc = x.src;
                    imgW = x.width;
                    imgH = x.height;
                );
                $(this).each(function() 
                    x.addEventListener('load',function()
                        console.log(imgW+'x'+imgH);
                        $(this).attr('original-size', imgW+'x'+imgH);
                    );
                ); 
            );

【问题讨论】：

任何图像都会自动加载它的原始Width x Heightso 如果你真的只是想获得它们的宽度和高度，你可以使用 javascript 来获取它们，然后将它们作为属性添加到你想要的元素!

original-size 是无效属性。如果要将大小存储到 HTML 标记中，请使用 data-original-size。

感谢您的评论，我对了解更多 javascript 非常有帮助

【参考方案1】：

问题中的 JavaScript 代码过于复杂和冗余。

这里有一些完成同样事情的简化代码。

// get all <a> elements inside <figure> elements
const atags = Array.from(document.querySelectorAll('figure a'));

// iterate over every <a> tag
atags.forEach(atag => 

  // create blank image element
  var img = new Image();

  // when the image loads, store its dimensions to the atag's
  // `data-original-size` attribute
  img.addEventListener('load', () => 
    let imgW = img.width,
      imgH = img.height;
    atag.dataset.originalSize = `$imgWx$imgH`;
    console.log('atag:', atag);
  );
  
  // load image from atag's href
  img.src = atag.href;

);

<figure>
  <a href="https://i.picsum.photos/id/1077/200/300.jpg">
    <img src="https://via.placeholder.com/40" />
  </a>
</figure>

<figure>
  <a href="https://i.picsum.photos/id/913/200/200.jpg">
    <img src="https://via.placeholder.com/50" />
  </a>
</figure>

<figure>
  <a href="https://i.picsum.photos/id/1058/100/100.jpg">
    <img src="https://via.placeholder.com/60" />
  </a>
</figure>

【讨论】：

wouuuu 这段代码完美运行，我的电脑快要坏了，非常感谢你是山羊

【参考方案2】：

这里的脚本绝对可以满足您的需求！

const getOriginalSize = (target, url) => 

  const image = document.createElement("img");
  image.src = url;
  
  image.onload = function()
  
    target.setAttribute("original-size", `$image.naturalWidthx$image.naturalHeight`);
  
  
  

  return image;

<figure>
    <a href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg">
        <img src="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg"/>
    </a>
</figure>

<figure>
    <a href="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg">
        <img src="https://www.velior.ru/wp-content/uploads/2009/05/Test-Computer-Key-by-Stuart-Miles.jpg"/>
    </a>
</figure>


<script>

  document.addEventListener('DOMContentLoaded', () => 
  
    document.querySelectorAll("figure").forEach( (figure) => 
    
      figure.querySelectorAll("a[href]").forEach( function(targetAhref) 
      
        getOriginalSize(targetAhref, targetAhref.href);
        console.warn("image loaded and size registred!");
      
       );
    
     );
  
   );

</script>

【讨论】：

获取<img>标签的大小，而不是<a href="">中的图片

啊！你是对的我没有注意到ahref 链接与img src 不同！没问题，我会很快解决这个问题！