应用文本从图像的高度和宽度

Applying the text from the image height and width

本文关键字：高度 图像 应用文 文本 应用      更新时间：2023-09-26

我有这样的代码

<script src='js.js'></script>
    <script>
    (function($){
    var img = document.getElementsByClassName('x'),
          L = img.width(),
          T = img.height();
    for (var i=0,len=img.length;i<len;i++){
    img[i] = $('#u').text("Width" + L + "Height " + T)
    }
    });
    </script>
<div id='image'>
    <img class='x' src='1.jpg'/>
    <span id='u'></span>
    </div>
    <div id='image'>
    <img class='x' src='5.jpg'/>
    <span id='u'></span>
    </div>

我想在<span id='u'></span>中应用图像的文本宽度和高度但是不行

您必须等待图像完全加载。

所以HTML是

    <div id='image'>
        <img class='x' src='1.jpg'/>
        <span id='u'></span> </div> <div id='image'>
        <img class='x' src='5.jpg'/>
        <span id='u'></span> 
</div>

应用代码为

<script type="text/javascript">
    $(document).ready(function(){
                    // reset src back to original..so that it works on cached images
                     $('img').each(function()
                     {
                  $(this).attr("src",$(this).attr("src")+"?_="+Math.random());
             });
                   $('img').load(function()
                     {
                           var h =  $(this).height();
                           var w =  $(this).width();
                           // nearest span ..set its text
                    $(this).parent().find('span').html("Height :"+h +"_ _ _"+"Width :"+w); 
                      }
                  ); //end img load   
    });
</script>

Edit:如果image get cached image load event没有正确触发，添加了重置SRC

的代码

添加:小提琴

http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/

相关文章：