CSS 제어를 통해 네트워크 이미지를 로드할 때 로드가 완료되기 전에 로컬 자리 표시자 이미지가 표시되고, 로드가 완료된 후에 네트워크 이미지가 표시됩니다.
원리: img 태그의 이후 의사 요소에 자리 표시자를 추가합니다. 그림 및 img는 위치: 절대로 설정됩니다. img 태그의 src는 네트워크 그림이 로드되지 않았기 때문에 로컬 그림이 표시됩니다. 다음 경우는 img의 src 속성 설정 시 명백하고 의도적인 지연이 적용됩니다.
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
img { position: relative;
}
img::after { content: ""; height: 100%; width: 100%; position: absolute; left: 0; top: 0; background: url(iphonex.png ) no-repeat center;
} </style></head><body>
<img src=""></body><script>
setTimeout(function() { document.querySelectorAll("img")[0].src = 'http://upload-images.jianshu.io/upload_images/7450593-65067eb4cf76d882.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240';
}, 3000);</script></html>혜택 1: 프런트 엔드, Java, 제품 관리자, WeChat 애플릿, Python 및 기타 리소스 컬렉션이 제공됩니다: https://www.jianshu.com/p/e8197d4d9880
혜택 2: WeChat 애플릿 시작하기 실제 전투에 대한 자세한 비디오 튜토리얼 전체 세트: https://www.jianshu.com/p/e8197d4d9880
위 내용은 이미지가 로드되지 않은 경우 CSS를 사용하여 자리표시자 표시를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
