完全加载时显示图像？ [复制]

【问题标题】：Display images when they are fully loaded? [duplicate]完全加载时显示图像？ [复制]
【发布时间】：2015-10-26 20:30:44
【问题描述】：

我希望图像仅在完全加载后才显示。我怎样才能做到这一点？

<ul id="listcontainer">
    <li class="li1">
        <img src="images/m1.png">
    </li>
</ul>

【问题讨论】：

.li1 > img{width:100%;}
你可以google一下
bit.ly/1Xt9pNg

标签： javascript jquery html css image

【解决方案1】：

您可以使用 document.ready 和 window.load 事件，因为当您的所有图像都加载完毕时会触发 window.load。

$(document).ready(function(){
    $("img").hide();
});

$(window).load(function(){
    $("img").show();
});

【讨论】：

【解决方案2】：

你可以试试这个把它放在你的css中#listcontainer{ opacity:0; }

    $(document).ready(function(){
    $('#listcontainer').animate({
    opacity: '1'
    },500);
});

如果你真的想隐藏你可以使用 .css 和 display:none; 把它放在你的css中#listcontainer{ display:none; }

$(document).ready(function(){
        $('#listcontainer').css(
        'display', 'block'
        );
    });

【讨论】：

【解决方案3】：

我认为你可以这样做：

    <script>
        document.addEventListener('DOMContentLoaded', function(){
            var img = document.createElement("img");
            img.src = "images/m1.png";
            var src = document.getElementsByClassName("li1");
            src.appendChild(img);
        }, false);
    </script>

【讨论】：