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

Question

你好朋友我正在尝试从 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>

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

我正在尝试使用我在此处找到的这段代码，我从 href（在 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);
                    });
                }); 
            });

Answer 1

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

const getOriginalSize = (target, url) => {

  const image = document.createElement("img");
  image.src = url;
  
  image.onload = function(){
  
    target.setAttribute("original-size", `${image.naturalWidth}x${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>

Answer 2

问题中的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 = `${imgW}x${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>

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

How get the original size images (height and width) from your href and put them on your attr. using jquery

javascript

html

jquery

each

loadimage