延迟页面渲染，直到下载图像

是否有可能延迟页面渲染，直到下载图像以防止图像在页面被绘制时加载？延迟页面渲染，直到下载图像

干杯！

2016-10-04 Aaron Benjamin

您可以使用图像上的onload来检测它何时加载。

var img = new Image(); 
 
img.src = "http://www.mind-coder.com/example.jpg"; 
 
img.onload = function() { alert("Height: " + this.height); }

下面

完整的示例，它有什么作用：

一个div叫盖，盖你的页面下载所有图像之前（可能显示像请加载消息）。
JS脚本（在这里需要香草没有jQuery）搜索页面中的所有图像，并使用src存储在data-src中的路径为每个图像加载它们。
onload在图像加载时执行，并且loadCount变量跟踪加载了多少图像，检查页面中的总数。
当加载的图片数量与页面中图片的数量相同时，隐藏封面并显示您的页面。

(function() { 
 
    var loadCount = 0; 
 
    var imgs = document.querySelectorAll('img'); 
 
    imgs.forEach(function(img) { 
 
img.src = img.dataset.src; 
 
img.onload = function() { 
 
    loadCount++; 
 
    if (loadCount === imgs.length) { 
 
    document.getElementById('cover').style.display = 'none'; 
 
    } 
 
}; 
 
    }); 
 
})()

#cover { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div id="cover">cover - loading</div> 
 
<img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d9/Big_Bear_Valley,_California.jpg"> 
 
<img data-src="https://upload.wikimedia.org/wikipedia/commons/9/92/Big_Sur_Coast_California.JPG">

来源

2016-10-04 04:40:31 GibboK

如果其中一个图像根本不加载（错误的URL或其他东西）会怎么样？ – nnnnnn

@nnnnnn感谢评论好点（+1），这个脚本只显示OP的基本概念，并未指定该场景。顺便说一下，可以使用'img.onerror'检测图像加载是否存在问题，并决定如何处理，例如：显示错误消息，或者即使一页或更多页面没有加载也显示页面成功了（但我因为悲伤取决于OP的使用案例）。 – GibboK

你可以这样做以下。首先设置显示：没有你的身体在HTML，所以它不会在以下条件下显示任何内容，然后

$(window).on("load", function() { 
    //show the body like below 
    $("body").fadeIn(500); 
});

体{显示：无; }

来源

2016-10-04 04:48:39 snit80

这很好，很简单，如果OP已将“jQuery”标签放在他们的问题上，我会投它... – nnnnnn

延迟页面渲染，直到下载图像

回答

相关问题