zoukankan      html  css  js  c++  java
  • javascript判断图片加载完成的三种方法

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以

    1.load 事件

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>img - load event</title>
    </head>
    <body>
        <img id="img1" src="">
        <p id="p1">loading...</p>
        <script type="text/javascript">
            img1.onload = function() {
                p1.innerHTML = 'loaded'
            }
        </script>
    </body>
    </html>
    

    2.readystatechange事件

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>img - readystatechange event</title>
    </head>
    <body>
        <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
        <p id="p1">loading...</p>
        <script type="text/javascript">
            img1.onreadystatechange = function() {
                if(img1.readyState=="complete"||img1.readyState=="loaded"){
                    p1.innerHTML = 'readystatechange:loaded'
                }
            }
        </script>
    </body>
    </html>
    

    3.img的complete属性

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>img - complete attribute</title>
    </head>
    <body>
        <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
        <p id="p1">loading...</p>
        <script type="text/javascript">
            function imgLoad(img, callback) {
                var timer = setInterval(function() {
                    if (img.complete) {
                        callback(img)
                        clearInterval(timer)
                    }
                }, 50)
            }
            imgLoad(img1, function() {
                p1.innerHTML('加载完毕')
            })
        </script>
    </body>
    </html>
    
  • 相关阅读:
    【leetcode】ZigZag——easy
    联合
    AddChildViewController
    imageWithRender(图片的渲染模式)
    13.范型函数的使用:将字典合并到当前字典
    12.代码获取命名空间名称,并创建相应的类(anyClass 应用)
    13.static 面向对象
    11.swift 单例
    swift String 扩展
    swift UIView 扩展
  • 原文地址:https://www.cnblogs.com/aryu/p/9802611.html
Copyright © 2011-2022 走看看