图片未完成加载显示loading

本文介绍了一种使用JavaScript实现图片加载过程中显示Loading效果的方法。通过判断浏览器类型并监听图片加载状态,确保图片加载完毕后再展示,提高了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<html>
<title>js图片未加载完显示loading效果</title>
<body>
<style>
img{float:left;width:200px;height:200px;margin:0 10px 10px 0}
</style>
<script>
//判断浏览器
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);

//判断是否加载完成
function Imagess(url,imgid,callback){
    var val=url;
    var img=new Image();
    if(Browser.ie){
        img.onreadystatechange =function(){
            if(img.readyState=="complete"||img.readyState=="loaded"){
                callback(img,imgid);
            }
        }
    }else if(Browser.Moz){
        img.onload=function(){
            if(img.complete==true){
                callback(img,imgid);
            }
        }
    }
    //如果因为网络或图片的原因发生异常,则显示该图片
    img.onerror=function(){img.src="http://www.86y.org/images/failed.png"}
    img.src=val;
}

//显示图片
function checkimg(obj,imgid){
document.getElementById(imgid).style.cssText="";
document.getElementById(imgid).src=obj.src;
}
//初始化需要显示的图片,并且指定显示的位置
window.onload=function(){
var imglist=document.getElementById("imagelist").getElementsByTagName('img');
for(i=0;i<imglist.length;i++)
{
    imglist[i].id="img0"+i;
    imglist[i].style = "background:url(http://www.86y.org/images/loading.gif) no-repeat center center;";
    Imagess(imglist[i].getAttribute("data"),imglist[i].id,checkimg);
}
}
</script>
<div id="imagelist">
<img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile17s.jpg" />
<img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile13.jpg" />
<img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile39.jpg" />
<img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile10.jpg" />
<img data="http://www.smashingapps.com/wp-content/uploads/2013/05/uikitsforwebmobile14.jpg" />
</div>
</body>
</html>

  

转载于:https://www.cnblogs.com/tianwengao/p/6839722.html

<think>我们正在讨论的是在Vue2中为图片加载添加loading效果。根据用户需求,当图片未加载完成时,显示一个加载动画(比如旋转图标、占位符等),加载完成后显示实际图片。参考引用内容: [^1]和[^2]提到了在Vue应用初始化时,通过index.html中的div#app外的结构来展示加载动画,但这适用于整个应用的加载,而不是单个图片。[^3]则提到了图片加载完成前增加loading效果,但给出的代码片段不完整。因此,我们需要针对单个图片加载过程进行控制。思路如下:1.创建一个自定义的图片组件(或指令),用于管理图片加载状态。2.在图片加载过程中显示loading动画,加载完成后隐藏loading显示图片。具体实现方式:方法一:使用自定义组件我们可以创建一个名为`ImgWithLoading`的组件,该组件包含两个状态:加载中和加载完成。步骤:1.在模板中,包含两个部分:-一个用于显示加载动画的元素(例如一个旋转的图标或者占位背景),使用`v-show="isLoading"`-一个实际的`<img>`标签,使用`v-show="!isLoading"`,并且绑定`src`属性,同时监听`load`事件和`error`事件。2.在组件的数据中,定义一个`isLoading`属性,初始值为`true`。3.在`mounted`或`created`钩子中,创建Image对象(或者直接使用img元素的onload事件)来监听图片加载。4.当图片加载完成时,将`isLoading`设为`false`;如果加载出错,也设为`false`(并可以显示错误占位符)。方法二:使用自定义指令我们可以创建一个自定义指令`v-image-loading`,将其绑定到图片元素上,指令的值可以是一个加载动画的元素(或者指令内部创建动画元素)。步骤:1.在绑定元素插入父节点时,创建一个loading元素(比如一个div,里面包含动画)并插入到绑定元素的位置(或覆盖在绑定元素上方)。2.监听图片的load事件,当图片加载完成后,移除loading元素。3.同样也要处理error事件,移除loading元素并可能显示错误状态。考虑到自定义组件更易于封装和复用,这里我们采用方法一,实现一个自定义组件。下面是一个简单的实现示例:创建组件`ImgWithLoading.vue`:```vue<template><divclass="img-container":style="containerStyle"><!--加载状态显示加载动画--><divv-show="isLoading"class="loading-indicator"><!--这里可以放任何加载动画,比如一个旋转图标--><svgclass="spinner"viewBox="005050" v-if="isLoading"><circleclass="path"cx="25"cy="25"r="20"fill="none"stroke-width="5"></circle></svg></div><!--图片加载完成后显示 --><imgv-show="!isLoading":src="src":alt="alt"@load="onLoad"@error="onError"/></div></template> <script> exportdefault {name: 'ImgWithLoading',props: {src: {type: String,required:true},alt: {type: String,default:''},//可以传入容器样式,比如宽高containerStyle:{type:Object,default: ()=> ({})}},data(){return {isLoading: true};},methods:{onLoad() {this.isLoading= false;},onError() {this.isLoading= false;//可以在这里触发一个错误事件,或者显示一个错误占位图this.$emit('error');}}}; </script><style scoped>.img-container{position:relative;display: inline-block;}.loading-indicator{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:#f5f5f5; /*加载背景色*/ }.spinner {animation: rotate2s linearinfinite;width:50px;height:50px;} .spinner .path {stroke: #3498db; /*旋转图标的颜色*/stroke-linecap:round;animation: dash1.5s ease-in-outinfinite;} @keyframesrotate {100% {transform: rotate(360deg);}} @keyframesdash {0% {stroke-dasharray:1,150;stroke-dashoffset:0;}50%{stroke-dasharray:90,150;stroke-dashoffset: -35;}100% {stroke-dasharray:90,150;stroke-dashoffset:-124;} }img{display:block;max-width:100%; }</style> ```使用组件: ```vue<template><div><img-with-loading :src="imageUrl" alt="示例图片"/></div></template> <script> importImgWithLoadingfrom './components/ImgWithLoading.vue';export default{components:{ImgWithLoading},data(){return {imageUrl:'https://example.com/path/to/image.jpg'};} };</script> ```说明:1.组件内部使用一个容器包裹,相对定位。加载动画绝对定位在容器内,覆盖整个容器。2.图片加载过程中,显示加载动画;加载完成,隐藏动画并显示图片。3.加载动画使用了SVG旋转动画,也可以使用CSS动画或GIF图片代替。4.通过`containerStyle`属性可以设置容器的样式,比如宽度、高度等,这样加载动画区域也会自适应。注意事项:-如果图片加载很快,加载动画可能一闪而过。如果希望避免这种情况,可以设置一个最小显示时间(例如500毫秒),但需要额外的定时器逻辑。 -错误处理:这里只是简单隐藏了加载动画,可以进一步扩展,比如显示一个错误图标。以上就是在Vue2中实现图片加载loading效果的一种方法。</think>在 Vue2 中实现图片加载时的 Loading 效果,可以通过自定义指令或组件的方式实现。以下是两种推荐方案: ### 方案一:使用自定义指令(推荐) ```vue <template> <div> <!-- 使用 v-image-loading 指令 --> <img v-image-loading :src="imageUrl" alt="示例图片" /> </div> </template> <script> // 注册全局指令 Vue.directive('image-loading', { inserted(el) { // 创建加载动画容器 const loadingEl = document.createElement('div') loadingEl.className = 'image-loading' loadingEl.innerHTML = ` <div class="spinner"></div> <div class="loading-text">加载中...</div> ` // 样式设置 Object.assign(loadingEl.style, { position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5' }) // 添加到图片容器 el.parentNode.style.position = 'relative' el.parentNode.appendChild(loadingEl) // 图片加载完成后移除动画 el.addEventListener('load', () => { loadingEl.style.display = 'none' }) // 错误处理 el.addEventListener('error', () => { loadingEl.innerHTML = '加载失败' }) } }) </script> <style> /* 加载动画样式 */ .spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-left-color: #3498db; animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .loading-text { margin-top: 10px; color: #666; } </style> ``` ### 方案二:使用自定义组件 ```vue <template> <div class="image-container"> <image-with-loading :src="imageUrl" alt="示例图片"/> </div> </template> <script> // ImageWithLoading.vue 组件 export default { name: 'ImageWithLoading', props: ['src', 'alt'], data() { return { isLoading: true, loadFailed: false } }, mounted() { const img = new Image() img.src = this.src img.onload = () => { this.isLoading = false } img.onerror = () => { this.isLoading = false this.loadFailed = true } }, render(h) { return h('div', { class: 'image-wrapper' }, [ this.isLoading && h('div', { class: 'loading-overlay' }, [ h('div', { class: 'spinner' }), h('div', { class: 'loading-text' }, '加载中...') ]), this.loadFailed ? h('div', { class: 'error-message' }, '图片加载失败') : h('img', { attrs: { src: this.src, alt: this.alt }, style: { display: this.isLoading ? 'none' : 'block' } }) ]) } } </script> <style> .image-wrapper { position: relative; display: inline-block; } .loading-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: #f5f5f5; } .error-message { padding: 20px; color: #ff4d4f; background: #fff2f0; } </style> ``` ### 关键实现要点: 1. **加载状态管理**: - 使用 `new Image()` 预加载图片 - 监听 `onload` 和 `onerror` 事件 - 通过 `isLoading` 状态控制显示逻辑 2. **动画显示**: - 加载显示 CSS 动画(如旋转指示器) - 使用绝对定位覆盖在图片容器上 - 加载完成后隐藏动画元素 3. **错误处理**: - 监听加载错误事件 - 显示错误提示信息 - 可添加重试功能(可选) 4. **样式优化**: - 设置加载背景色(`#f5f5f5`) - 添加过渡动画增强体验 - 保持图片容器尺寸稳定 ### 优化建议: 1. **添加过渡效果**: ```css .loading-overlay { transition: opacity 0.3s; } img { transition: opacity 0.3s; } ``` 2. **骨架屏占位**: ```vue <div v-if="isLoading" class="skeleton-placeholder"> <!-- 图片尺寸的灰色占位块 --> </div> ``` 3. **懒加载集成**: ```vue <img v-lazy="imageUrl" v-image-loading alt="Lazy loaded image" > ``` 这些方案能有效解决图片加载时的白屏问题,提升用户体验。根据项目复杂度选择指令或组件方案,简单项目推荐指令方案,复杂项目推荐组件化方案[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值