如何从您的 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>

我想从“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>