zoukankan      html  css  js  c++  java
  • JS判断图片加载完成的方式

    1.onload事件

    <!DOCTYPE HTML>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>img - load event</title>
    </head>
    
    <body>
        <img id="img1" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.jpg">
        <p id="p1">loading...</p>
        <script type="text/javascript">
            img1.onload = function () {
                p1.innerHTML = 'loaded'
            }
        </script>
    </body>
    
    </html>

    所有浏览器都支持img的load事件

    2.img的complete事件

    <!DOCTYPE HTML>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>img - complete attribute</title>
    </head>
    
    <body>
        <img id="img1" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2567670815,24101428&fm=26&gp=0.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>

    定时器判断是否加载完成

  • 相关阅读:
    mongodb安装与启动
    js数组操作
    js字符串操作
    js原型对象和原型链
    Js 原型对象与原型链
    zepto
    闭包的理解
    JSON与XML的区别比较
    ajax 异步请求四个步骤
    angularJS之项目知识
  • 原文地址:https://www.cnblogs.com/codexlx/p/12776382.html
Copyright © 2011-2022 走看看