加载图像后启动转换事件

start a transition event after loaded a image

本文关键字：转换事件启动图像加载更新时间：2023-12-30

我在转换时遇到问题，包含图像的div应该在2秒内从"right：200px；"转换到"400px"，并且转换应该在图像加载到文档中时开始，这里是css代码：

    div.contenedor {
        width: 300px;
        height: 257px;
        position: fixed;
        right: 200px;
        bottom: 0px;
        z-index: 100;
        -webkit-transition: right 2s;
        -moz-transition: right 2s;
        transition: right 2s;
    }

这里是js代码：

        function transi() {
            var id = "L" + Math.floor(Math.random() * 10000);
            function open() {
                var eOpen = document.getElementById(id + "_container");
                    eOpen.style.right = "400px";
            };
            var dContenedor = document.createElement("div");
            dContenedor.id = id + "_container";
            dContenedor.className = "contenedor";
            var ima = document.createElement("img");
            ima.src = "XXXX.jpg";
            ima.width = "300";
            ima.height = "250";
            dContenedor.appendChild(ima);
            document.onreadystatechange = function(){
                var rsw = this.readyState;
                console.log(rsw);
                if (rsw) if (rsw != 'complete') if (rsw != 'loaded') {return;}
                document.body.appendChild(dContenedor);
                console.log(ima.complete);
                if (ima.complete) {
                    open();
                };
            }
        };
        transi();

由于某种原因，没有进行转换，并且div将直接转到"400px"，如果有人有一些想法，我会推荐它，感谢您的光临

可能在映像的load事件上调用函数？

UPD增加了的工作示例

function transi() {
  var id = "L" + Math.floor(Math.random() * 10000);
  var dContenedor = document.createElement("div");
  dContenedor.id = id + "_container";
  dContenedor.className = "contenedor";
  function open() {
    // we already have ref to needed element
    dContenedor.style.right = "400px";
  };
  var ima = document.createElement("img");
  ima.width = "300";
  ima.height = "250";
  dContenedor.appendChild(ima);
  document.body.appendChild(dContenedor);
  // when image is loaded fire event
  ima.onload = function() {
    open();
  }
  ima.src = "https://v1.std3.ru/32/9b/1455811008-329b55c554efcec3988dc8ab44eb972f.jpeg";
};
transi();

   div.contenedor {
     width: 300px;
     height: 257px;
     position: fixed;
     right: 200px;
     bottom: 0px;
     z-index: 100;
     -webkit-transition: right 2s;
     -moz-transition: right 2s;
     transition: right 2s;
     background: #333;
   }