js图片加载完成前显示loading

最新推荐文章于 2024-03-17 23:17:34 发布
最新推荐文章于 2024-03-17 23:17:34 发布
阅读量4.1k 收藏 7
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37221852/article/details/81298735
版权 
<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="./static/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].src="http://www.86y.org/images/loading.gif";  
    imglist[i].style.cssText="background:url(./static/images/loading.gif) no-repeat center center;"  
    Imagess(imglist[i].getAttribute("data"),imglist[i].id,checkimg);  
}  
}  
</script>  
<div id="imagelist">  
<img data="./static/images/1.jpg" />  
<img data="./static/images/2.jpg" />  
<img data="./static/images/3.jpg" />  
<img data="./static/images/4.jpg" />  
<img data="./static/images/5.jpg" />  
</div>  
</body>  
</html>
爱忽悠的唐唐
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
模仿京东首页DIV懒加载，根据滚动条来加载div
Cahier
10-16 2943
原理是先将需要展示内容的div单独提取出来，放到一个新的页面，在需要展示的时候，直接通过AJAX请求页面，然后展示，实现DIV懒加载，在数据多的时候可以将数据分成很多段，用户滚动到需要展示的位置在加载，大大提高打开网页的速度。 效果图： 1.在没有拉到底部的时候显示一个gif加上提示语 2.在滚动条拉到底部的时候，加载下一页内容 HTML： <div id="tiezi"...
js图片加载完成前显示loading效果
Bright2017的博客
11-06 1948
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>loading</title> </head> <body> <img id="img"> <script> ...
JavaScript预加载图片并显示loading的代码
weixin_34143774的博客
08-26 178
代码简介： JavaScript图片预加载技术，和平时大家说的网页loading有点像，本代码真正实现了加载完图片再显示的功能，如果图片没有下载完则一直显示正在加载，而且不会影响网页其它部分的正常下载，可以提高你网页的速度。 代码内容： View Code <html><head><title>JavaScript预加载图片并显示loading的代...
js实现图片加载中效果 loading
一个吃水不忘挖井人的博客。希望能帮助到你
04-18 5937
关于loading加载的2个插件。 jQuery.lazyload Echo.js 这两个插件功能都满足不了需求，我们这里只是因为图片加载比较慢，需要一个转圈而已，并不是需要懒加载。 而且，这两个插件也无法设置图片加载后的显示。 自己写一个 原理： img标签不使用src进行资源加载。 使用 Image对象获取img标签上的src-data属性，进行加载，判断加载完成后回显。 ...
js实现图片懒加载，图片预加载
小龚的博客
03-22 4922
欢迎点击: 个人官网博客 预加载(进度) 比如一些公众号h5宣传页面，受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏； 进入页面的时候把图片全加载一遍，就不会出现图片加载慢显示慢的情况 效果图： <script> //页面所有img标签的集合 let img = document.getElementsByTagName("img"); function yuLoad() { let index = 0 for
五分钟教你用JS实现前端优化之懒加载与预加载
最新发布
MCM0115的博客
03-17 1324
快速解决理解什么是懒加载和预加载！通俗易懂max版
vue实现图片加载完成前的loading组件方法
08-28
Vue 实现图片加载完成前的 Loading 组件方法 在前端开发中，图片加载是非常常见的操作，但是如何在图片加载完成前展示 Loading 效果呢？今天，我们将分享一篇使用 Vue 实现图片加载完成前的 Loading 组件方法，这个...
jQuery图片加载显示loading效果
10-21
在这个场景中，jQuery被用来监听图片加载事件，并在图片加载过程中展示一个loading图标，直到图片完全加载完成。当图片加载失败时，还可以提供备用图片来替代无法显示的图片。 首先，我们看下HTML结构，这里使用了...
jquery显示loading图片直到网页加载完成的方法
01-19
本文实例讲述了jquery显示loading图片直到网页加载完成的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html class=no-js> <head> <meta charset='UTF-8'> <title&...
JS实现的自定义显示加载等待图片插件(loading.gif)
10-22
主要介绍了JS实现的自定义显示加载等待图片插件,涉及javascript针对图片的动态加载实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript图片预加载代码，显示loading.rar
12-02
JavaScript图片预加载代码，显示loading.rarJavaScript图片预加载代码，显示loading.rarJavaScript图片预加载代码，显示loading.rarJavaScript图片预加载代码，显示loading.rarJavaScript图片预加载代码，显示...
图片没加载完成，显示loading，
周凤伟的博客
10-26 1202
img 图片加载完之后，再执行某些操作 function showBallDom() { Toast.loading('', 0, null, true) // antd mobile的loading // 加载完几张图片之后再进行操作，就在数组里写几张图片链接 let promiseAll = [], assetsImageList = [ 'https://123.png', 'https://234.png', '
图片未完成加载显示loading
weixin_30470643的博客
05-11 817
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:left;width:200px;height:200px;margin:0 10px 10px 0} </style> <script> //判断浏览器 var...
JS实现页面加载完毕之前loading提示效果
热门推荐
php菜鸟技术天地
10-28 5万+
一、JS代码： //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（loading框的宽度为215
检测img loaded事件
饭叔
04-16 1736
http://www.open-open.com/lib/view/open1325647998484.html var imgLoad = function (url, callback) { var img = new Image(); img.src = url; if (img.complete) { callback(img.width, img.height); }
前端实现图片（img）预加载
Revival_Liang的博客
06-02 2934
.box{width: 1000px;height: 7000px;position: relative;} .igm1,.igm2,.igm3{width: 1000px;height: 1000px;margin-bottom: 500px;} $("img").lazyload({ effect :"fadeIn", threshold
【图片预加载】ImgLoaded★★★★★★★★★★★★
weixin_30845171的博客
01-13 158
************************************************************* 第一种方法：（可以计算加载图片的数量） css样式：/*图片预加载*/ .ImgLoading{ position:absolute; width:100%; height:100%; top:0; background:#000; z-index:100; opa...
js实现页面加载完毕之前loading提示效果
weixin_30344131的博客
06-14 613
最近做项目遇见一个问题就是大的页面打开很慢，页面空白处太多，很影响客户体验，于是想着在页面加载的时候页面不要显示空白 于是用js实现了以下的内容 loading效果 //在页面未加载完毕之前显示的loading Html自定义内容 var _LoadingHtml = '页面加载中，请等待...'; //呈现loading效果 document.write(_Loadin...
用html、css、js 代码实现多张图片没有加载完成时展示loading字样，图片加载完成，loading去除
05-31
可以使用以下代码实现： ... ``` ...这样当页面加载时，会显示 Loading 提示，当所有图片加载完成后，Loading 提示会被隐藏。同时，当图片加载失败时，会隐藏图片并继续检查是否所有图片都加载完成。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值