Manchmal müssen Sie die Größe des Bildes ermitteln, was nach dem Laden des Bildes erfolgen muss. Dafür gibt es drei Möglichkeiten, die im Folgenden einzeln vorgestellt werden.
1. Ereignis laden
< !DOCTYPE HTML>
img; ; <br></head> <br><body><img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> <br> <p id="p1">loading...</p> <br><script type="text/javascript"> >p1. innerHTML = 'loaded' <br>} <br></script> <br></html> „geladen“ gibt an, dass alle Browser das Ladeereignis von img unterstützen. <br><br>2. readystatechange-Ereignis <br><br><br><br><br>Code kopieren <br>
</div>
<br> Der Code lautet wie folgt: <br><br> <br>< !DOCTYPE HTML> ; <div class="codetitle"></head> <span><body><img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg"> <a style="CURSOR: pointer" data="70876" class="copybut" id="copybut70876" onclick="doCopy('code70876')"> <p id="p1">loading...</p> <u><script type="text/javascript"> </u>if( img1.readyState=="complete"||img1.readyState=="loaded"){ </a>p1.innerHTML = 'readystatechange:loaded' </span>} </div>} <div class="codebody" id="code70876"></script> ; <BR></body> <br></html> <br><br> <br>readyState ist abgeschlossen und zeigt an, dass das Bild geladen wurde. Getestet, dass IE6-IE10 dieses Ereignis unterstützen, andere Browser unterstützen es nicht. <br><br>3. Vollständiges Attribut von img<br><br><br><br><br>Code kopieren<br><br><br> Der Code lautet wie folgt:<br><br> <br> <!DOCTYPE HTML> <br><head> /title> </div></head> <br><body> > <br><p id="p1">loading...</p> <br> var timer = setInterval(function() { <br>if (img.complete) { <div class="codetitle">callback(img) <span>clearInterval(timer) <a style="CURSOR: pointer" data="48849" class="copybut" id="copybut48849" onclick="doCopy('code48849')">} <u>}, 50) </u> } </a>imgLoad(img1, function() { </span>p1.innerHTML('Laden abgeschlossen') </div>}) <div class="codebody" id="code48849"></script> <br>< /html> <br><br> <br>Polling überwacht kontinuierlich das vollständige Attribut von img. Wenn es wahr ist, zeigt es an, dass das Bild geladen wurde, und stoppt die Abfrage. Dieses Attribut wird von allen Browsern unterstützt. <br><br>
</div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme：</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel：<a class="dBlack" title="JavaScript ruft die Originalgröße des Bildes ab und verwendet die Breite als example_javascript-Tipps" href="http://m.php.cn/de/faq/13172.html">JavaScript ruft die Originalgröße des Bildes ab und verwendet die Breite als example_javascript-Tipps</a></span><span>Nächster Artikel：<a class="dBlack" title="JavaScript ruft die Originalgröße des Bildes ab und verwendet die Breite als example_javascript-Tipps" href="http://m.php.cn/de/faq/13174.html">JavaScript ruft die Originalgröße des Bildes ab und verwendet die Breite als example_javascript-Tipps</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="http://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！</p></div><div class="footermid"><a href="http://m.php.cn/de/about/us.html">Über uns</a><a href="http://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="http://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved
</p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) {
var _times = times || -1, //100次
_interval = interval || 20, //20毫秒每次
_self = this,
_selector = this.selector, //选择器
_iIntervalID; //定时器id
if( this.length ){ //如果已经获取到了，就直接执行函数
func && func.call(this);
} else {
_iIntervalID = setInterval(function() {
if(!_times) { //是0就退出
clearInterval(_iIntervalID);
}
_times <= 0 || _times--; //如果是正数就 --
_self = $(_selector); //再次选择
if( _self.length ) { //判断是否取到
func && func.call(_self);
clearInterval(_iIntervalID);
}
}, _interval);
}
return this;
}
$("table.syntaxhighlighter").wait(function() {
$('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>");
});
$(document).on("click", ".cnblogs_code_footer",function(){
$(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide();
});
$('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}});
</script></body></html>
