1

我正在尝试为网页的 onload() 事件编写一些代码，我想在该事件上等待网页出现，直到所有图像都加载到网页上。我找到了这个：

onLoad 事件用于加载所有图像

但是它并没有完全按预期工作，或者是我不知道如何使用它....

那么，这是使用 onload 事件等待所有图像加载的最佳方式还是您推荐另一个？

我希望在此网站上预加载图像：链接。地图图像更大，因此它比正确的图像更持久。但它不能小，因为它是一个透明的图像......所以我决定在显示完整的网页后预加载所有图像。但还是不能……知道吗？

4

5 回答 5

2

如果我理解正确，我会这样做：

1）首先，我将添加一个“加载 div”，以隐藏 html 内容，并在加载所有图像后删除该 div。显示加载消息和/或加载指示器不仅更优雅，而且比在图像之后实际加载页面更容易。这意味着您在图像完成后动态创建和加载内容，您需要做更多的工作。

2) 然后我会选择所有图像并向它们的 onload 事件添加一个简单的函数，该函数将增加加载图像的数量并调用一个函数来检查是否所有图像都已加载。如果所有图像都已加载，我将删除加载 div，仅此而已。

这是下面的一些工作代码（减去图像，您需要自己添加它们）。基本上，而不是带有图像的 div 你应该有自己的 html 代码和之前或之后（虽然之前更好），添加“加载 div”（请记住我的 css 样式它不是一个好习惯）

<!doctype html>
<html>
<head>
<script>
window.onload = function() {

    var images = document.getElementsByTagName('img'),
        totalImages = images.length,
        imagesLoaded = 0,
        img;


    function checkForLoaded() {

        if(imagesLoaded === totalImages) {
            var loadingDiv = document.getElementById('loadingDiv');
            loadingDiv.parentNode.removeChild(loadingDiv);
        }
    }


    for (var i = 0; i < totalImages; i++) {
        img = new Image();

        img.onload = function () {

            imagesLoaded++;
            checkForLoaded();
        }

        img.src = images[i].src;

    }
}

</script>
</head>
<body>

    <div id="content">
        <img src="0001.jpg">
        <img src="0002.jpg">
        <img src="0003.jpg">
        <img src="0004.jpg">
        <img src="0005.jpg">
        <img src="0006.jpg">
        <img src="0007.jpg">
        <img src="0008.jpg">
        <img src="0009.jpg">
        <img src="0010.jpg">
    </div>

    <div id="loadingDiv" style="height:2000px; width: 2000px; position: absolute; top: 0px; left: 0px; background-color: #FFFFFF">
        loading
    </div>
</body>
</html>
于 2012-10-22T15:16:16.410 回答
0

我不明白你想要什么结果，但如果你想在加载<body>标签之前加载某些图像，你可以使用 JavaScript：

<script type="text/javascript">
var image1=new Image()
image1.src="pathway to image"
var image2=new Image()
image2.src="pathway to image"
</script>

如果你把这个JS放在<head>标签里，那么那些图片会在body之前加载。只需使用变量（在本例中为image1和image2）而不是普通的 HTML<img>标记。

于 2012-10-22T14:34:50.783 回答
0

我会尝试设置添加特定的类，例如loadinghtml 或 body 元素，将函数连接到onload事件/使用加载所有图像的 jQuery，一旦加载图像，loading从 html/body 中删除类元素。

然后添加一些 CSS 来隐藏整个页面内容，并在存在加载类的情况下显示一些加载占位符。仅当用户启用了 javascript 时才应注意添加此类。Modernizr添加的js和no-js类可以帮助执行此操作，或者自然而然地使用 javascript 添加类。loading

至于实际的预加载，this和this是处理预加载图像的两个相当广泛的线程。

于 2012-10-22T14:35:03.257 回答
0

您应该使用 $(window).load() 而不是 $(document).ready()

于 2012-10-22T14:39:11.667 回答
-1

考虑将 Jquery 与文档上的加载事件一起使用。此处有更多信息文档加载事件与准备就绪

于 2012-10-22T14:27:28.190 回答