问题
The following webpage loads Font Awesome, displays the icon fa-check, and has a debugger breakpoint on window.onload:
<!DOCTYPE html>
<html>
<head>
<link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<script>
window.onload = function () {
debugger;
};
</script>
</head>
<body>
<div class='fa fa-check fa-4x'></div>
</body>
</html>
On Chrome (with the console open), the breakpoint is hit after the icon is rendered. This is the expected behaviour.
On Safari (with the console open), the breakpoint is hit before the icon is rendered. I am assuming this is a Safari bug.
How can I guarantee that window.onload triggers after the icon is rendered on Safari?
回答1:
Figuring out exactly when a font has loaded on the page is unfortunately a very difficult problem, especially when you have to support multiple browsers/devices. Last time I took a survey there was no magic bullet but many people have written up their approaches. See here and here and here.
来源：https://stackoverflow.com/questions/29052673/window-onload-triggered-before-font-face-load