图片预加载

在编码过程中,图片处理经常会遇到问题

看如下这段代码:

HTML部分

<div id="container">
    <img src="css系列/imgs/旋转木马的图片/2.jpg" alt="" id="img">
</div>

Js部分:

var oImg = document.getElementById("img");
console.log(oImg.offsetWidth);

这个时候我们想要控制台弹出的是图片的宽度,但实际控制台弹出的是0,原因是因为图片加载的问题.script标签写在body的最底层能保证img标签加载完,却保证不了资源文件是不是加载完.所以会出现这种情况

再看下面一段代码:

<div id="container">
    <!--<img src="css系列/imgs/旋转木马的图片/2.jpg" alt="" id="img">-->
</div>

<script>
    var oContainer = document.getElementById("container");
    var oImg = new Image();
    oImg.src = "img/1.jpg";
    oImg.onload = function(){
        oContainer.appendChild(oImg);
        alert(oImg.offsetWidth);

    };
</script>

图片不直接写在div中,而是通过预加载加载进来.

重点onload.将图片加载完成后,再输出宽度.这就是图片的预处理

在IE6下测试发现有问题,new Image有兼容性问题,所以解决兼容性的方法如下

var oContainer = document.getElementById("container");
var oImg = new Image();
oImg.onload = function(){
    oContainer.appendChild(oImg);
    alert(oImg.offsetWidth);

};
oImg.src = "img/1.jpg";

将oImg.src放到onload的下面