解决请求中由于使用img.onload()异步导致数据排序错乱

最新推荐文章于 2024-07-05 16:37:04 发布
最新推荐文章于 2024-07-05 16:37:04 发布
阅读量4.3k 收藏 3
点赞数 3
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cainiao_hs/article/details/108336036
版权

请求接口列表，列表每一项返回了一个图片地址，需要根据图片宽高去处理问题。使用了img的onload事件，由于onload事件是异步方法。返回的列表的时候排序错乱。

目前想到的 解决办法是

先写一个promise 然后调用的时候通过 接口请求中使用 async await返回出正常排序的数组。

简单发个代码

目前是这么解决的。如果各路大佬有更好的解决办法 欢迎指教

cainiao_hs
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript：图片异步加载 onLoad函数
ilovewangjie990502的博客
08-11 1821
由于业务中有个需求，有个选项是让用户点击查看大图，这个大图应该带遮罩层显示在屏幕正中间，但是由于图片是挂载在服务器上的图片，所以加载图片是异步的，即图片并不能一次性加载完毕，这就导致图片即使加载完成，也无法实现屏幕居中。 后来发现可以在img标签里实现onLoad函数，当图片完毕后，让图片替换之前的默认图片。 <img src={imgLoading} onLoad={e => model.imageLoadHandler(e)}/> imageLoadHandler = e =&gt
drawImage 绘制多张图片时层次顺序错乱
huafeng1999的博客
01-20 1178
drawImage 绘制多张图片时层次顺序错乱 项目场景： canvas绘制结果页分享图片 问题描述： 目前需要使用 drawImage() 绘制多张图片 在 canvas 中是没有 z-index 这个属性的，只有绘制早的图片会显示在底层，绘制的图片显示在顶层。 downImage(ctx, img, x, y, w, h, canvas) { let bgImg = new Image() bgImg.src = img img.onload = function (.
canvas如何将image中onload异步请求变成同步
tq1711的博客
10-08 2092
为什么我们需要将image的onload加载事件变成同步请求呢？答案当然是图片加载完成后方便我们后续去做一些操作，不然我们想去做一些操作的时候，还需要到onload函数去操作。
js img的onload事件不触发
最新发布
weixin_43915401的博客
07-05 536
上面的代码，可能存在设置addEventListener之前，图片已经加载完了，onload事件不处罚。调换一下img.src和img.addEventListener顺序试试。
js 实现图片预加载 （js操作 Image对象属性complete ，事件onload 异步加载图片）
astraydog的专栏
09-07 3046
<br />通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入，我谈谈对Image对象的一些认识。<br />看个例子：<br /><input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" /><br /><script type="text/javascript"><br /><!--<br />    function addImg(isrc)<br />    {<br />        var Im
多次异步请求，结果接口返回不同顺序的问题
LS_952754的博客
06-23 2153
多次异步请求，结果接口返回不同顺序的问题
html异步加载图片,javascript-img异步加载图片
weixin_31236309的博客
06-05 1642
在开发中,我们经常有异步加载图片的请求,然后在图片加载成功后做一些操作,一般我们通过onload方法来实现.网上有两种写法,大家可以先看一下(注:logo.jpg是张本地图片):例子1:var img = new Image();img.src = "logo.jpg";img.onload = function () {alert("image is loaded");};document.bo...
Preload图片预加载（jQuery插件）
前端向朔
04-30 7190
背景 我们在做页面的时候，从用户体验的角度出发，肯定是希望用户以最快的速度看到完整的页面信息，但在实际情况中经常会遇到些问题。 比如受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏； 或者页面素材比较多、比较大，需要一定的加载时间，特别有时候的活动页面，我们一般会把首屏做的更多多样化或者传达比较丰富的氛围的时候，我们的首屏素材上都会比较大，有时候也会给元素加上动画来传达信...
vue基础知识总结及测试遇到的前端bug分析
D321xiaoding的博客
04-03 1792
vue基础知识总结、测试遇到的前端bug分析原因
taro 小程序转h5之后报错_使用taro命令(taro convert)转h5碰到的一些问题
weixin_39585886的博客
12-20 474
自v1.2.0开始支持此功能Taro 可以将你的原生微信小程序应用转换为 Taro 代码，进而你可以通过taro build的命令将 Taro 代码转换为对应平台的代码，或者对转换后的 Taro 代码进行用 React 的方式进行二次开发。微信原生小程序转 Taro 的操作非常简单，首先必须安装使用npm i -g @tarojs/cli安装 Taro 命令行工具，其次在命令行中定位到...
JavaScript与Image加载事件(onload)、加载状态(complete)
10-28
以前写过一个图片等比缩放的Js函数，缺陷是要等到所有图片都加载完毕了，才能进行等比缩放。
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
10-28
通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入，我谈谈对Image对象的一些认识。
web学习笔记
热门推荐
刘群智的博客
07-27 1万+
常用属性............................................................................................ 1 Html基础........................................................................................... 3 ...
react图片上传，image.onload异步时图片上传闪烁的问题1
aminwangaa的博客
12-14 1213
话不多说，代码攻心 import React,{Component} from 'react'; import {connect} from 'react-redux'; import { Upload, Icon, message } from 'antd'; function getBase64(img, callback) { const reader = new FileReade...
搞清Image加载事件(onload)、加载状态(complete)后，实现图片的本地预览，并自适应于父元素内(完成)...
weixin_34278190的博客
08-04 1247
onload与complete介绍 complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而onload则是这个Image对象的load事件回调，当图片加载完成后执行onload绑定的函数。 给下面一个例子，解释下： document.getElementById('load').onclick = function() { ...
img.onload知识点归纳总结
ZLJ925的博客
09-10 9359
前言： 在使用onload的时候，我们总是会看到各种建议，以及在不同浏览器上的不同表现，这些别人总结的经验都不是一蹴而就的，都是在不断的敲代码，不断的试错，测试，优化只有才从坑里爬出来的。只有在遇到不明白的地方，努力搞明白，动手敲几遍，知识才是自己的。个人愚见～_~,不废话了…先看一份代码：<body> <div class="box"> <div> 1111</div>
JavaScript实现图片预加载时设置img的src属性和onload事件的位置前后顺序关系
weixin_43342105的博客
07-11 1190
JavaScript实现图片预加载时设置img的src属性和onload事件的位置前后顺序关系
window.onload 重复， 导致不执行，怎么解决
06-08
如果你在同一个页面中多次使用 `window.onload`，则只有最后一个 `window.onload` 会生效，因为每次调用 `window.onload` 都会覆盖之前的回调函数。如果你的 `window.onload` 没有执行，可以尝试以下两种方法： 1. 使用 `addEventListener` 添加 `load` 事件回调函数： ```javascript window.addEventListener('load', function() { // 在此处编写代码 }); ``` 这种方法可以在同一个页面中添加多个 `load` 事件回调函数，而不会覆盖之前的回调函数。 2. 将多个 `window.onload` 合并成一个： ```javascript window.onload = function() { // 在此处编写代码 }; ``` 这种方法虽然只能添加一个 `window.onload` 回调函数，但可以避免多次调用 `window.onload` 导致覆盖之前的回调函数的问题。 需要注意的是，如果你的页面中已经使用了某个框架或库，可能会重写 `window.onload`，导致你的回调函数无法执行。这种情况下，你需要查看框架或库的文档，了解如何在它们的代码中添加你的回调函数。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值