Question

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

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

Answer 1

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

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

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

Answer 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'
        );
    });

Answer 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>

完全加载后显示图像？

3 个答案: