JavaScript实现图片预加载，自适应指定尺寸容器

最新推荐文章于 2022-06-29 08:15:00 发布

ClassicSong

最新推荐文章于 2022-06-29 08:15:00 发布

阅读量3.1k

点赞数

分类专栏： Javascript源码文章标签： javascript 图片 dom

本文链接：https://blog.youkuaiyun.com/ernijie/article/details/51360649

版权

Javascript源码专栏收录该内容

19 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
    <meta type="viewport" content="width=device-width,initial-scale:1.0,user-scalable:no"/>
</head>

<body>
    <input type="button" class="buttons" id="js_button" value="载入图片"/>
    <div class="image_con js_imageCon" id="js_imageCon"></div>
</body>
<script type="text/javascript">
    var button = document.getElementById("js_button");

    button.onclick = function(){
        var image = document.createElement("img");

        image.onload = function(){
            var w = this.width;
            var h = this.height;
            var p = w/h;

            if(image.readyState=="complete"||image.readyState=="loaded"||image.complete){  //条件1,2是判断ie6-ie10;条件3是判断除ie6-ie10外的浏览器。
                if(p>1){   //p>1 此条件可以按需修改
                    this.style.width = "300px";
                    this.style.height = "auto";  //切记要加，（只为跨过ie给img默认添加width和height属性坑这里的width和height的值是图片实际的尺寸），如果不加ie中会按照图片实际height显示，图会变形
                }else{
                    this.style.width = "auto";  //同上
                    this.style.height = "180px";
                }
                //以下两行代码切记写到onload事件里边，避免谷歌中图片尺寸更改时过程的可见（由大变小，或由小变大）。
                var imgCon = document.getElementById("js_imageCon");
                imgCon.appendChild(image);
            }
        };
        image.src = "images/image.jpg"
    }
</script>
</html>