• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    HTML5 图片预加载的示例代码

    在HTML5中,我们可以使用drawImage方法在canvas上进行画图操作,其基本代码如下:

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    var image = new Image();
    image.src = "images/01.jpg";
    context.drawImage(image, 0, 0);
    

    不过我们会发现这样写是无法显示出图片的,因为图片并没有加载完全,我们就调用了drawImage方法,我们可以使用img的onload方法,使图片加载完全后

    在执行drawImage操作,代码如下

    var image = new Image();
    image.src = "images/01.jpg";
    image.onload = function() {
        context.drawImage(image, 0, 0);
    }
    

    或者使用<img>标签先加载图片

    <img src="images/01.jpg" style="display: none" id="image">
    

    然后使用getElementById来获得图片对象

    var image = document.getElementById('image');
    

    但是在图片较多的情况下,使用上面两种方式都不是太优雅,我们可以使用下面的方法,等待所有图片加载完全后,再执行其他操作

    document.addEventListener("DOMContentLoaded", loadImages, true);
    
    var images = new Array(3), imageNums = 0;
    
    function loadImages() {
        for (var i = 0; i < images.length; i++) {
            images[i] = new Image();
            images[i].addEventListener("load", trackProcess, true);
            images[i].src = "images/01.jpg";
        }
    }
    
    function trackProcess() {
        imageNums++;
        if (imageNums = images.length) {
            drawImages();
        }
    }
    
    function drawImages() {
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        for (var i = 0; i < images.length; i++) {
            context.drawImage(images[i], 200 * i, 0);
        }
    }

    参考文章: Preloading Images

    到此这篇关于HTML5 图片预加载的示例代码的文章就介绍到这了,更多相关HTML5 图片预加载内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

    上一篇:html2canvas截图空白问题的解决
    下一篇:HTML5 Canvas实现放大镜效果示例
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    HTML5 图片预加载的示例代码 HTML5,图片,预,加载,的,示例,