search
HomeWeb Front-endJS TutorialAdd loading effect before vue image loading is completed

This time I will bring you vuepicturesIncrease the loading effect before the loading is completed, and increase the loading effect before the vue image is loaded.What are the precautions, the following is the actual combat Let’s take a look at the case.

is as follows:

<template>
 <img  src="/static/imghwm/default1.png" data-src="url" class="lazy" alt="Add loading effect before vue image loading is completed" >
</template>
<script>
 export default {
  props: [&#39;src&#39;], // 父组件传过来所需的url
  data() {
   return {
    url: &#39;http://www.86y.org/images/loading.gif&#39; // 先加载loading.gif
   }
  },
  mounted() {
   var newImg = new Image()
   newImg.src = this.src
   newImg.onerror = () => { // 图片加载错误时的替换图片
    newImg.src = &#39;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&#39;
   }
   newImg.onload = () => { // 图片加载成功后把地址给原来的img
    this.url = newImg.src
   }
  }
 }
</script>

The following is pure js code

nbsp;html>


 <meta>
 <title>loading</title>


 <img  alt="Add loading effect before vue image loading is completed" >
 <script>
  window.onload = () => {
   var img = document.querySelector(&#39;#img&#39;);
   img.src = &#39;http://www.86y.org/images/loading.gif&#39;; // 先加载loading.gif
   var newImg = new Image();
   newImg.src = &#39;https://avatars3.githubusercontent.com/u/1?v=3&#39;;
   newImg.onerror = () => { // 图片加载错误时的替换图片
    newImg.src = &#39;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&#39;;
   }
   newImg.onload = () => { // 图片加载成功后把地址给原来的img
    img.src = newImg.src
   }
  }
 </script>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Vue implements the progress bar of page loading

Detailed explanation of the use of vue better-scroll scrolling plug-in

The above is the detailed content of Add loading effect before vue image loading is completed. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Vue中如何实现全局loading效果Vue中如何实现全局loading效果Jun 11, 2023 am 09:05 AM

在前端开发中,我们经常会有一种场景:用户在与网页交互过程中需要等待数据的加载,此时通常会有一个loading效果显示,提醒用户等待。在Vue框架中,实现一个全局loading效果并不困难,下面我们来介绍一下如何实现。第一步:创建Vue插件我们可以创建一个名为loading的Vue插件,该插件可以在所有的Vue实例中引用。在插件中,我们需要实现以下两个方法:s

常用的numpy方法和注意事项来增加维度常用的numpy方法和注意事项来增加维度Jan 26, 2024 am 08:38 AM

numpy是Python中常用的科学计算库,提供了丰富的数学函数和强大的数组操作功能。在实际应用中,有时我们需要对数组进行维度的扩展或调整。本文将介绍numpy中常用的增加维度的方法,并提供详细的代码示例。一、使用reshape方法numpy中的reshape方法允许我们将数组的维度进行修改,而不改变数组的元素个数。具体使用方法如下:importnumpy

如何在空洞中找回遗失的宝箱如何在空洞中找回遗失的宝箱Jan 22, 2024 pm 05:30 PM

绝区零找回遗失在空洞中的宝箱怎么完成呢?这个副本里的箱子很多,但是因为散落在各处,很多人都找不到,下面我们就和你们一起分享一下如何快速找到箱子通关副本。绝区零找回遗失在空洞中的宝箱怎么完成在绳网中看到委托贴子;具体分析:1、我们可以先去绳网中看到委托贴子【找回遗失在空洞中的宝箱】,然后选择发送信息。2、交流兑换以后就可以去领取这个委托任务了,然后就可以开启这个做法了。3、然后需要我们进入空洞就可以解锁这个任务了呢。4、然后我们就可以接取盗洞客的委托,还可以得到很多数量的齿轮硬币。5、出空洞当中需

如何使用MongoDB实现数据的增加、修改、删除功能如何使用MongoDB实现数据的增加、修改、删除功能Sep 20, 2023 pm 02:53 PM

如何使用MongoDB实现数据的增加、修改、删除功能MongoDB是一种流行的开源NoSQL数据库,具有高性能、可伸缩性和灵活性。在使用MongoDB存储数据时,我们经常需要对数据进行增加、修改和删除操作。以下是使用MongoDB实现这些功能的具体代码示例:数据库连接:首先,我们需要连接到MongoDB数据库。在Python中,可以使用pymongo库来实现

麦肯锡:2022年人工智能应用率翻倍麦肯锡:2022年人工智能应用率翻倍Oct 10, 2023 pm 02:21 PM

可以自动跟随顾客的购物车和比人类采摘黄瓜速度更快的机器人,更容易成为抓人眼球的头条新闻,但人工智能和机器学习技术最引人注目的应用通常是在看不见的幕后。越来越多的组织开始将人工智能和机器学习驱动的工具应用于后台流程,例如文档处理、数据输入、员工入职和工作流自动化,它们发现了显著的效率提升。几十年来,通过自动化提高后台生产力的能力已经很明显,但随着先进的人工智能和机器学习工具的出现,使自动化可以实现的目标发生了一步变化,包括在医疗保健等高度监管的行业。(来源:AI生成)“过去,人工智能被认为是一项复

PPT文档时增加撤消步数的操作方法PPT文档时增加撤消步数的操作方法Mar 26, 2024 pm 02:30 PM

1、运行PPT软件。2、点击左上角的【文件】选项卡。3、在文件选项卡点击左侧的【选项】。4、点击PowerPoint选项窗口左侧的【高级】。5、在高级选项卡中,输入你需要的撤消步数。6、设置完成后点击【确定】。现在PowerPoint软件就会为你记录你设置的步数了。注意不同版本的Office进入选项设置的方式略有不同。

安全帽的万能绝区如何实现安全帽的万能绝区如何实现Jan 24, 2024 pm 02:36 PM

绝区零万能的安全帽怎么完成呢?要做这个任务,必须要接取一个先行任务,其实就是去到黑燕工地的旧址,然后接取任务,但是到底要怎么做才能完成?下面就和小编一起看看吧。绝区零万能的安全帽怎么完成1、前往黑雁工地旧址的位置处,需要在i这里找到铁头然后就是与他进行对话。2、进行对话之后需要前往坑中的水泥袋旁边,之后就能够在这里看到三个负责安全帽的人,在这里借安全帽。3、之后需要找到谨慎的工人进行对话,对话完成后返回寻找铁头。4、最后与铁头进行对话就能够完成任务了。上述信息就是有关于绝区零万能的安全帽怎么完成

如何在dedecms中增加新栏目?如何在dedecms中增加新栏目?Mar 14, 2024 pm 01:51 PM

如何在dedecms中增加新栏目?随着互联网的快速发展,网站内容管理系统变得越来越重要。而dedecms作为一款功能强大且灵活的内容管理系统,受到了许多网站开发者的青睐。在使用dedecms建站的过程中,有时候我们需要根据实际需求增加一些新的栏目,以便更好地组织和管理网站内容。那么,如何在dedecms中增加新栏目呢?接下来将为您介绍具体的操作步骤和代码示例

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

PhpStorm Mac version

PhpStorm Mac version

The latest (2018.2.1) professional PHP integrated development tool

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

SublimeText3 English version

SublimeText3 English version

Recommended: Win version, supports code prompts!

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)