Vue 이미지 로딩이 완료되기 전 로딩 효과 추가
이번에는 로딩이 완료되기 전 vuepictures의 로딩 효과를 가져왔습니다. vue 그림이 로딩되기 전에 로딩 효과를 추가할 때의 주의 사항은 무엇입니까? 다음은 실제 사례입니다. .
모양은 다음과 같습니다:
<template>
<img :src="url">
</template>
<script>
export default {
props: ['src'], // 父组件传过来所需的url
data() {
return {
url: 'http://www.86y.org/images/loading.gif' // 先加载loading.gif
}
},
mounted() {
var newImg = new Image()
newImg.src = this.src
newImg.onerror = () => { // 图片加载错误时的替换图片
newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg'
}
newImg.onload = () => { // 图片加载成功后把地址给原来的img
this.url = newImg.src
}
}
}
</script>다음은 순수 js 코드입니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>loading</title>
</head>
<body>
<img id="img">
<script>
window.onload = () => {
var img = document.querySelector('#img');
img.src = 'http://www.86y.org/images/loading.gif'; // 先加载loading.gif
var newImg = new Image();
newImg.src = 'https://avatars3.githubusercontent.com/u/1?v=3';
newImg.onerror = () => { // 图片加载错误时的替换图片
newImg.src = 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1489486509807&di=22213343ba71ad6436b561b5df999ff7&imgtype=0&src=http%3A%2F%2Fa0.att.hudong.com%2F77%2F31%2F20300542906611142174319458811.jpg';
}
newImg.onload = () => { // 图片加载成功后把地址给原来的img
img.src = newImg.src
}
}
</script>
</body>
</html>이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
vue 더 나은 스크롤 스크롤 플러그인 사용에 대한 자세한 설명
위 내용은 Vue 이미지 로딩이 완료되기 전 로딩 효과 추가의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7476
15
1377
52
77
11
49
19
19
31
Vue에서 전역 로딩 효과를 구현하는 방법
Jun 11, 2023 am 09:05 AM
프런트 엔드 개발에서는 사용자가 웹 페이지와 상호 작용하는 동안 데이터가 로드될 때까지 기다려야 하는 경우가 종종 있습니다. 이때 일반적으로 사용자에게 기다리도록 상기시키는 로딩 효과가 표시됩니다. Vue 프레임워크에서는 전역 로딩 효과를 구현하는 방법이 어렵지 않습니다. 1단계: Vue 플러그인 생성 모든 Vue 인스턴스에서 참조할 수 있는 loading이라는 Vue 플러그인을 생성할 수 있습니다. 플러그인에서는 다음 두 가지 방법을 구현해야 합니다.
움푹 패인 곳에서 잃어버린 보물 상자를 찾는 방법
Jan 22, 2024 pm 05:30 PM
제로존 동굴에서 잃어버린 보물 상자를 복구하는 방법은 무엇입니까? 이 던전에는 상자가 많지만 여기저기 흩어져 있기 때문에 상자를 빨리 찾는 방법과 던전을 클리어하는 방법을 알려드리겠습니다. 구멍에서 잃어버린 보물 상자를 검색하는 작업을 완료하는 방법은 밧줄 그물의 커미션 게시물을 참조하세요. 구체적인 분석: 1. 먼저 밧줄 그물로 가서 커미션 게시물을 볼 수 있습니다. 구멍]을 선택한 다음 메시지 보내기를 선택합니다. 2. 교환하고 교환한 후에 본 의뢰를 받고 본 수련을 시작하시면 됩니다. 3. 그런 다음 이 미션을 잠금 해제하려면 구멍에 들어가야 합니다. 4. 그러면 우리는 동굴 도둑으로부터 커미션을 수락하고 많은 양의 장비 코인을 얻을 수 있습니다. 5. 구멍에서 빠져나와야 한다
차원을 늘리기 위해 일반적으로 사용되는 numpy 방법 및 예방 조치
Jan 26, 2024 am 08:38 AM
Numpy는 Python에서 일반적으로 사용되는 과학 컴퓨팅 라이브러리로, 풍부한 수학 함수와 강력한 배열 연산 함수를 제공합니다. 실제 응용에서는 배열의 크기를 확장하거나 조정해야 하는 경우가 있습니다. 이 기사에서는 numpy에서 차원을 늘리는 데 일반적으로 사용되는 방법을 소개하고 자세한 코드 예제를 제공합니다. 1. reshape 메소드를 사용하세요. numpy의 reshape 메소드를 사용하면 배열의 요소 수를 변경하지 않고도 배열의 크기를 수정할 수 있습니다. 구체적인 사용법은 다음과 같습니다: importnumpy
안전모의 보편적인 안전지대를 구현하는 방법
Jan 24, 2024 pm 02:36 PM
궁극적인 제로 유니버설 안전 헬멧을 완성하는 방법은 무엇입니까? 이 작업을 수행하려면 사전 작업을 수행해야 합니다. 실제로 Heiyan 건설 현장의 이전 현장에 가서 작업을 수행해야 합니다. 아래 에디터와 함께 살펴보겠습니다. Ultimate Zero 범용 안전모 완성 방법 1. Black Goose 건설 현장의 옛 현장으로 이동하여 여기에서 Tietou를 찾은 다음 그와 대화를 해야 합니다. 2. 대화를 나눈 후 구덩이에 있는 시멘트 봉지로 가면 여기 헬멧 담당 3명이 보이고 여기서 헬멧을 빌릴 수 있습니다. 3. 이후에는 신중한 일꾼을 찾아 대화를 해야 합니다. 대화가 끝난 후 다시 돌아와 아이언헤드를 찾으세요. 4. 마지막으로 Tietou와 대화를 나누어 작업을 완료하세요. 위 정보는 궁극의 제로전능투구를 완성하는 방법에 대한 내용입니다.
Vue에서 전역 로딩 효과를 구현하는 방법
Nov 07, 2023 am 09:18 AM
Vue에서 글로벌 로딩 효과를 구현하는 방법 Vue 개발에서는 글로벌 로딩 효과를 구현하는 것이 일반적인 요구 사항입니다. 전역 로딩 효과는 사용자에게 페이지가 로딩 중임을 알려주는 좋은 메시지를 제공하여 사용자 경험을 향상시킬 수 있습니다. 이 기사에서는 Vue에서 전역 로딩 효과를 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다. 전역 Loading 구성 요소 만들기 먼저 전역 Loading 구성 요소를 만들어야 합니다. 이 구성 요소는 간단할 수 있습니다.
WeChat의 Hongmeng 버전이 곧 완료될 예정이며 Huawei Mate70이 출시될 수 있습니다.
Aug 23, 2024 pm 09:31 PM
최신 뉴스에 따르면 화웨이의 순수혈통 Hongmeng 시스템 HarmonyOSNext의 WeChat 적용 작업이 대부분 완료되었으며 공식 버전이 곧 사용자에게 제공될 예정입니다. 또한 WeChat 외에도 Tencent 기반의 다른 모바일 애플리케이션도 이에 적응하고 있습니다. WeChat은 기본적으로 이 단계에서 대부분의 적응 작업을 완료했습니다. 소식통에 따르면 미니 프로그램과 같은 WeChat 기능은 아직 기다려야 합니다. 순조롭게 진행된다면 순혈 홍멍이 정식 데뷔하면 사용자들은 위챗을 직접 이용할 수 있다. Yu Chengdong의 이전 성명에 따르면 화웨이는 올해 4분기에 순혈 홍몽 시스템을 출시할 예정이며, 그때까지 화웨이 Mate70 시리즈가 출시될 예정이며, 이때 위챗도 공식적으로 공개될 예정이다. 또한 일부 보고서에 따르면 WeChat의 Hongmeng 버전은 단순화된 버전일 수 있습니다. 이 버전에는 WeChat의 일부 핵심 기능만 포함되어 있습니다.
MongoDB를 사용하여 데이터를 추가, 수정, 삭제하는 방법
Sep 20, 2023 pm 02:53 PM
MongoDB를 사용하여 데이터를 추가, 수정 및 삭제하는 방법 MongoDB는 고성능, 확장성 및 유연성을 갖춘 인기 있는 오픈 소스 NoSQL 데이터베이스입니다. MongoDB를 사용하여 데이터를 저장할 때 데이터를 추가, 수정, 삭제해야 하는 경우가 많습니다. 다음은 MongoDB를 사용하여 이러한 기능을 구현하는 구체적인 코드 예제입니다. 데이터베이스 연결: 먼저 MongoDB 데이터베이스에 연결해야 합니다. Python에서는 pymongo 라이브러리를 사용하여 이를 수행할 수 있습니다.
Dedecms에 새 열을 추가하는 방법은 무엇입니까?
Mar 14, 2024 pm 01:51 PM
Dedecms에 새 열을 추가하는 방법은 무엇입니까? 인터넷의 급속한 발전으로 인해 웹사이트 콘텐츠 관리 시스템이 점점 더 중요해지고 있습니다. 강력하고 유연한 콘텐츠 관리 시스템인 Dedecms는 많은 웹사이트 개발자들이 선호합니다. 웹 사이트를 구축하기 위해 Dedecms를 사용하는 과정에서 웹 사이트 콘텐츠를 더 잘 구성하고 관리하기 위해 실제 필요에 따라 몇 가지 새로운 열을 추가해야 하는 경우가 있습니다. 그렇다면 Dedecms에 새 열을 추가하는 방법은 무엇입니까? 다음으로 구체적인 단계와 코드 예제를 소개하겠습니다.
