Às vezes, você precisa obter o tamanho da imagem, que precisa ser carregada após o carregamento da imagem. Abaixo, o editor compilou um resumo de vários métodos para julgar se uma imagem JS está carregada. Vamos dar uma olhada.
1. Evento de carga
<script type = "text/javascript"> $ ('img'). onLload = function () {// code} </script>Vantagens: simples e fácil de usar, sem afetar o código HTML.
Desvantagens: apenas um elemento pode ser especificado e o código JavaScipp deve ser colocado abaixo do elemento da imagem
2. Método jQuery
<script type = "text/javascript"> $ (function () {$ ('Observe que não ligue o evento de carga em $ (document) .ready ().
Vantagens: os eventos de elemento podem ser vinculados em lotes e não afeta o conteúdo do código HTML
Desvantagens: é necessário o suporte da biblioteca jQuery e o código precisa ser colocado abaixo do elemento que precisa ser operado.
3. Evento ReadyStateChange
<! Doctype html> <html> <head> <meta charset = "utf -"> <title> img - ReadyStateChange Event </ititle> </ad Head> <body> <img id = "img" src = "http://pic.win.com/wall/f) type = "text/javascript"> img.onreadystatechange = function () {if (img.readyState == "complete" || img.readyState == "carregado") {p.innerhtml = 'ReadyStatechange: carregado'} </script> </body> </html>O ReadyState está completo e carregado, o que significa que a imagem foi carregada. Testar que o IE6-IE10 suporta este evento, mas outros navegadores não.
4. O atributo completo do IMG
<! Doctype html> <html> <head> <meta charset = "utf -8"> <title> img - atributo completo </ititle> </ad Head> <body> <img id = "img1" src = "http://pic1.win4000.com/wallpaper/f/51cbbbbb./pic1.win4000.com/wallpaper/f/51c3BBBBBC://pic1.win4000.com/wallpaper/f/51c3BBBBBC://pic1.win4000.com/wallpaper/f/51c3BBBBBC://pic1.win4000.com/wallpaper/f/51c3bbb. id = "p1"> carregando ... </p> <script type = "text/javascript"> function iMgload (img, retorno de chamada) {var timer = setInterval (function () {if (img.complete) {callback (img) clearInterval (timer)}, 50)} imgload (img1, function, function, function ()}, 50)}} {p1.innerhtml ('carregado')}) </sCript> </body> </html>A pesquisa monitora continuamente o atributo completo do IMG. Se for verdade, significa que a imagem foi carregada e a pesquisa é interrompida. Esta propriedade é suportada por todos os navegadores.
O conteúdo acima é um resumo do método JS para determinar se a imagem é carregada pelo editor. Espero que seja útil para todos. Ao mesmo tempo, gostaria de agradecer muito pelo seu apoio ao site da Wulin Network!