开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

js加载图片带进度条

在JavaScript中加载图片并显示进度条可以通过多种方式实现，主要依赖于HTML5的XMLHttpRequest对象或者fetch API来获取图片数据，并结合进度事件来更新进度条。以下是实现这一功能的基础概念和相关步骤：

基础概念

XMLHttpRequest: 一个内置在浏览器中的接口，允许开发者发送HTTP请求并处理响应。
Fetch API: 现代化的网络请求API，提供了更强大和灵活的网络请求能力。
Progress Events: 当进行数据传输时，浏览器会触发一系列的进度事件，如loadstart, progress, load, loadend等。

实现步骤

创建一个HTML结构，包含一个用于显示进度的元素和一个用于显示图片的元素。
使用JavaScript发起图片请求，并监听进度事件。
根据接收到的数据量更新进度条。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Loading with Progress Bar</title>
<style>
  #progressBar {
    width: 100%;
    background-color: #ddd;
  }
  #progress {
    width: 0%;
    height: 30px;
    background-color: #4CAF50;
    text-align: center;
    line-height: 30px;
    color: white;
  }
</style>
</head>
<body>

<div id="progressBar">
  <div id="progress"></div>
</div>
<img id="image" src="" alt="Loading..." style="display:none;">

<script>
function loadImage(url) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.responseType = 'blob';

  xhr.onloadstart = function() {
    document.getElementById('progress').style.width = '0%';
  };

  xhr.onprogress = function(event) {
    if (event.lengthComputable) {
      var percentComplete = (event.loaded / event.total) * 100;
      document.getElementById('progress').style.width = percentComplete + '%';
      document.getElementById('progress').textContent = Math.round(percentComplete) + '%';
    }
  };

  xhr.onload = function() {
    if (xhr.status === 200) {
      var img = document.getElementById('image');
      img.src = URL.createObjectURL(xhr.response);
      img.style.display = 'block';
    }
  };

  xhr.send();
}

// Usage
loadImage('path_to_your_image.jpg');
</script>

</body>
</html>

优势

用户体验提升：用户可以看到图片加载的实时进度，而不是无响应的等待。
可靠性增强：通过进度条，用户可以预知加载时间，减少因长时间等待而产生的挫败感。

应用场景

大型图片或图集的加载。
网页上的动态内容加载，如新闻网站的图片新闻。
移动应用中的图片加载，特别是在网络条件不佳的情况下。

可能遇到的问题及解决方法

跨域问题：如果图片资源位于不同的域，可能会遇到CORS（跨源资源共享）问题。解决方法是在服务器端设置适当的CORS头部。
性能问题：频繁的DOM操作可能会影响性能。可以通过节流（throttling）或防抖（debouncing）技术来优化进度条更新的频率。
兼容性问题：旧版浏览器可能不支持某些现代API。可以通过特性检测来提供回退方案，或者使用polyfill。

通过上述方法，可以在网页上实现一个带有进度条的图片加载功能，从而提高用户体验和应用的整体质量。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

JS实现图片懒加载

懒加载的实现原理由于网页中占用资源较多的一般是图片，所以我们一般实施懒加载都是对图片资源而言的，所以这里的实现原理主要是针对图片。...大家都知道，一张图片就是一个标签，而图片的来源主要是src属性。浏览器是否发起亲求就是根据是否有src属性决定的。...实现步骤及Demo 1.先介绍几个和懒加载相关的API document.documentElement.clientHeight//获取屏幕可视区域的高度直观的图解： element.offsetTop...可能到这里还有一些人不知道怎么实现，我们还是用图来展示一下：看了这张图，我们就得出了一个判断公式：如果：offsetTop-scroolTop图片进入了可视区内，则被请求...device-width, initial-scale=1.0"> 图片懒加载

11.4K2 0

Html图片懒加载动画,js实现图片懒加载效果

本文实例为大家分享了js图片懒加载的具体代码，供大家参考，具体内容如下图片懒加载，思路:当鼠标滑动到对应图片的高度时，进行图片的加载； #div{ width: 575px; height: auto...aImgTop = getPos(aImg[i]).top; // 当滚动的时候进行判断,看他的滚动的高度加上它的clientHeight 是否比它的 top 值大 // 如果大或等于说明滚动到当前位置可以加载图片...if (oScrollTop + clientH >= aImgTop) { // 进行图片的加载 aImg[i].src = aImg[i].getAttribute(“_src”); } }...} 当有类似于瀑布流的布局时常用的加载模式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

9.4K7 0

原生js实现图片懒加载

目的：大量图片的网站，一次性加载所有图片会存在速度变慢，卡顿等问题。...我们可以使用图片懒加载技术，只加载视口内的图片，其余图片用默认小图片（由于所有图片都使用这一张小图片，只会发送一次请求，不会增加性能负担。）或者骨架屏代替。...等图片滚动到可视区后，再给图片url赋值。...这样优化了前端加载速度，提高了性能核心思路： scrollTop 判断图片滚动的距离, innerHeight求当前视口高度，offsetTop得到图片相对于父元素的位置，然后scrollTop +...-- 图片地址" src="小图片地址"/> --> <img src="./images/1pxImg.png" data-url=".

6.5K2 0

js图片的预加载功能

//单图片预加载 function preloadImg(url) { var img = new Image(); img.src = url; if(img.complete...) {//complete记得检查comlete属性 //接下来可以使用图片了 //do something here } else {...img.onload = function() { //接下来可以使用图片了 //do something here }; } }...//多图片预加载 function preloadImg(list) { var imgs = arguments[1] || [], //用于存储预加载好的图片资源 fn

7.1K8 0

原生JS实现图片懒加载

通过原生JS实现懒加载 <!

5.3K1 0

JS判断单、多张图片加载完成

试想，如果模板中有图片，此时如何判断图片是否加载完成？在此之前来了解一下jquery的ready与window.onload的区别，ready只是dom结构加载完毕，便视为加载完成。...(此时图片没有加载完毕)，onload是指dom的生成和资源完全加载（比如flash、图片）出来后才执行。接下来回到正题，先从单张图片说起。..."> //js $(document).ready(function(){ //jquery $('#xiu').load(function(){ // 加载完成...3、以下内容省略兼容（2）、单张图片（图片动态生成） //js var xiu = new Image() xiu.src = 'http://www.daqianduan.com/wp-content.../uploads/2014/11/hs-xiu.jpg' xiu.onload = function(){ // 加载完成 } （3）、单张图片（结合ES6 Promise） //js

12.5K2 0

JS使用lazyload进行图片懒加载

原理：图片的加载是由src引起的，当对src赋值时浏览器会请求图片资源，基于这个，可以利用html5的属性data-xxx来保存图片的路径，当我们需要加载图片的时候才将data-xxx的值赋予src...就能实现图片的按需加载了，也就是懒加载了方法： 1.使用lazyload插件，引用jquery.js和jquery.lazyload.js 2.将img标签中的src属性赋值为加载图片，即一张临时的...loading.gif图，将真正的图片路径放在data-original属性中 3.当JS监听到该图片元素进入可视窗口时，将data-original属性中的地址存赋予到src属性中，达到懒加载的效果...引用 //html //js $('ul img').lazyload() 这样就完成了最简易的图片懒加载了可自行拓展延伸 window.addEventListener...('DOMContentLoaded', function() { //后端分页进行滚动加载 $(function () { var pageNo = 1, //页码

3K1 0

iOS开发swift版异步加载网络图片(带缓存和缺省图片)

iOS开发之swift版异步加载网络图片与SDWebImage异步加载网络图片的功能相似，只是代码比较简单，功能没有SD的完善与强大，支持缺省添加图片，支持本地缓存。 ...异步加载图片的核心代码如下： func setZYHWebImage(url:NSString?, defaultImage:NSString?...if url == nil { return } //设置默认图片 if defaultImage !

1.8K3 0

js 图片加载失败处理方法「建议收藏」

个人github：https://github.com/qiilee 欢迎follow 在项目中不可避免会用到图片，尤其是列表，有时候图片会加载失败；这样就会显示一个很难看的坏图片缩略图；下面介绍两种方法...，解决这个问题： 1、如果在你的项目中有引入jQuery插件，你可以使用error([[data],fn])这个函数； $("img").error(function(){ 　　//当图片加载失败时，你要进行的操作

6K2 0

实现图片懒加载jquery.scrollLoading.js

首先需要jquery.min.js插件，我用的是jQuery v2.1.3，大家可以去百度搜很多自己引入全局顶部即可，当然你的程序自带就不需要在引用JQ了。...第一步找到你的全局顶部文件，上面已经说了如果你程序自带jq就忽略即可，大概就这样吧第二步找到你的底部文件，增加两段jspiex.gif为你要首次懒加载的图片，图片大家可以自己去找或者用我的点击查看懒加载图片...script> $(function () { $(".scrollLoading").scrollLoading(); }); 第三步找到你的全局js...文件，粘贴下方的js。...实在不懂是哪个建议先进入到你的文章页按F12打开控制台看看加载了哪个js就扔进去 (function($) { $.fn.scrollLoading = function(options) {

2.2K2 0

lazyload.js实现图片异步延迟加载

所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。...看看你有没有这JavaScript 所谓图片异步加载，意思是不用一次把图片全部加载完，你可以叫它延迟加载，缓冲加载都行。...看看你有没有这种需求：某篇文章图片很多，如果在载入文章时就载入所有图片，无疑会延缓载入速度，让用户等更久，所以，我想找这样一种插件，让网页只加载浏览器视野范围内的图片，没出现在范围内的图片就暂不加载，等用户滑动滚动条时再逐步加载...；代码精简，便于操作维护，JS代码仅仅 1.6KB 先决条件是：你的站加载了 Jquery.js 原理：这个特效是少有的即华丽又加速的效果，因为它能判断访客是不是在查看当前图片，若非则加载预留的填充图片...不用担心对访客的友好程度，这个效果会在图片即将被浏览到的时候就开始加载图片; 实现方法：下载 jquery.lazyload.js 下载预填充图片 fill.gif 点此打包下载

12.8K2 0

封装环形加载进度条（Vue插件版和原生js版）

1 （1）、安装插件安装Vue插件 npm install loading-vue-component 使用 // main.js import loading from 'loading-vue-component

3K2 0

使用pace.js美化你的网站加载进度条

前言最近做网站体验优化的时候突然发现一个好东西，pace.js(加载进度条插件)，gzip之后只有几kb，简单好用，特地分享出来，也作为自己的一个学习总结。...pace.js介绍 pace.js是一个自动加载页面进度栏的小插件,它可以自动监视您的Ajax请求，事件循环滞后，文档就绪状态以及页面上的元素来确定进度。...,当然我们也可以很方便的基于它去修改成更加定制化的加载进度样式....我们可以window.paceOptions在导入文件之前进行设置： paceOptions = { // 禁用元素源 elements: false, // 只在常规下和ajax导航下展示进度条...Pace.restart：显示进度条（如果已隐藏），然后从头开始报告进度。每当pushState或replaceState默认情况下被自动调用。 Pace.stop：隐藏进度条并停止对其进行更新。

2.4K3 0

原生 JS 实现最简单的图片懒加载

懒加载什么是懒加载懒加载其实就是延迟加载，是一种对网页性能优化可方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示的时候再发送图片请求，避免打开网页时加载过多资源...什么时候用懒加载当页面中需要一次性载入很多图片的时候，往往都是需要用懒加载的。懒加载原理我们都知道HTML中的标签是代表文档中的一个图像。。说了个废话。。...加载图片页面打开时需要对所有图片进行检查，是否在可视区域内，如果是就加载。...，当滚动条滚动时就不需要遍历所有的图片，只需要遍历未加载的图片即可。...实验页面打开时可以看出此时仅仅是加载了img1和img2，其它的img都没发送请求，看看此时的浏览器第一张图片是完整的呈现了，第二张图片刚进入可视区域，后面的就看不到了~ 页面滚动时当我向下滚动

3K2 0

js - 预加载+监听图片资源加载制作进度条

因为功能的特殊性，就要求我们提前监听页面的静态图片是否全部加载完毕。即处理预加载。...原来页面加载完毕后刷新，再展示的图片都是缓存的图，而load又监听不到缓存的图。要了我的老命了。于是我又找，什么方法能监听缓存的图啊？目标锁定了js里的img.complete。...注意划重点是js的属性。...所以这里使用上要注意，因为我获取的dom对象是jq的，要转成js的再调complete属性，于是代码直接是： if(MyImg[0].complete){ // 用于缓存图片 sumAdd...100:progress 如果加载进度想做成进度条效果，只需要把得到的progress值赋给进度条的宽度即可。至于进度条怎么做，看我这篇博文。

9.8K2 2

原生JS实现加载进度条

分享一个原生JS实现的动态加载进度条特效，效果如下：实现的代码如下：原生JS...实现加载进度条 #progressBox { width: 300px; height: 40px...获取最外层的div var oDiv1 = document.getElementById('progressBox'); // 获取内层进度条的...获取内层文字发生变化时的div var oDiv3 = document.getElementById('progressText'); // 获取总进度条的宽度

6.7K3 1

C# PictureBox加载图片并显示进度条

以前用winform的PictureBox时没有试过加载网络的图片，刚刚看到一段代码才了解到原来还有LoadAsync这个方法，可以异步加载图片，再加上LoadProgressChanged事件也可以获得当前加载的进度...在窗体上放一个PictureBox控件，一个按钮，一个进度条控件，再用Label来显示当前进度百分比，具体代码如下： private void button1_Click(object sender,

1.8K2 0

JS图片预加载插件

在开发H5项目中有时候会遇到要加载大量图片的情况，利用预加载技术可以提高用户浏览时的体验。 ...1)概念：懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。...--无序预加载需要写进度条，当加载完毕后才能操作；有序预加载可以不写进度条，加载完第一张后立即加载第二张、第三张、第四张... --> js"> js"></script..., { //每张图片加载(load事件)一次触发一次each() each: function (count) { //进度条显示百分比进度

16.8K5 0

JAVA图片批量上传JS-带预览功能

这篇文章就简单的介绍一个很好用的文件上传工具，批量带预览功能。直接贴代码吧，都有注释，很好理解。 HTML页面 js.../jquery-1.8.3.min.js"> js/upload/zyupload-1.0.0...: BASE+"/photo/add/"+boxId, // 上传文件的路径 fileType : ["jpg","png","txt","js...true, // 是否可以拖动上传文件 tailor : true, // 是否可以裁剪图片

7.2K5 0

htmlimg图片加载失败_js针对图片加载失败的处理方法分析

本文实例讲述了js针对图片加载失败的处理方法。...分享给大家供大家参考，具体如下：在项目中不可避免会用到图片，尤其是列表，有时候图片会加载失败；这样就会显示一个很难看的坏图片缩略图；下面介绍两种方法，解决这个问题： 1、如果在你的项目中有引入jQuery...插件，你可以使用error([[data],fn])这个函数； $(“img”).error(function(){ //当图片加载失败时，你要进行的操作 //$(this).attr(‘src’,...object.addEventListener(“error”, myScript); 支持的 HTML 标签: , , , 另外，当图片加载错误的时候,触发onerror事件，还可使用一下方法进行处理...用默认的图片替换 PS：这里再为大家附上javascript系统自带事件参考表供大家参考查询：希望本文所述对大家JavaScript程序设计有所帮助。

6.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭