zoukankan      html  css  js  c++  java
  • [TimLinux] JavaScript 如何在AJAX中替换元素的图片

    1. 示例代码

    /*
     *  <img id="idTestImg" src="/static/test.png" />
     */
    var idTestImg = document.getElementById('idTestImg');
    var tmpImgObj = new Image(); // 也可以使用document.creatElement('img'); 创建效果是一样的。
    
    tmpImgObj.src = '/static/new.png';  // 这个操作会触发从服务器请求图片的行为
    
    if (tmpImgObj.complete) {
        // 判断图片是否存在缓存中,缓存中的图片不需要onload操作
        idTestImg.src = tmpImgObj.src;
    } else {
        // 不在缓存中的图片,下载完成之后,会触发load事件,在onload事件处理程序中,完成替换图片功能。
        tmpImgObj.onload = function () {
            idTestImg.src = tmpImgObj.src;
        };
    }

    2. 说明

    • 图像对象的创建方式有两种:new Image(); document.createElement('img');
    • 给图像对象的src属性赋值,会触发浏览器向服务器请求图片资源的过程;
    • 图片可能在缓存中,也可能来自服务器请求过来的资源,complete属性可以判断;
    • load事件除了可以使用在body对象,也可以使用在img对象上。
    • 可以不创建一个临时对象:直接将idTestImg.src赋值给一个url值,同样能够达到以上的效果。
  • 相关阅读:
    参考__JAVA
    债券价格和通胀率
    C++ 面试题
    欧式和美式期权
    explicit
    smart pointer
    const pointer
    manacher-马拉车算法
    输入有空格的字符串的2种方法
    bind()与connect()——计网中socket的使用
  • 原文地址:https://www.cnblogs.com/timlinux/p/9341371.html
Copyright © 2011-2022 走看看