이미지가 로드되지 않은 경우 CSS를 사용하여 자리표시자 표시를 구현합니다.
- 小云云원래의
- 2018-03-19 17:37:234088검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS로 스크린샷을 찍는 세 가지 방법다음 기사：CSS로 스크린샷을 찍는 세 가지 방법