微信小程序开发图片加载顺序问题

微信公开课小程序热门讨论关于「微信小程序开发图片加载顺序问题」的小程序开发问题
补充:微信图片加载顺序问题
展开:在进行瀑布流布局的时候，需要根据图片的高度进行瀑布流布局，另外一个需求是根据浏览量进行从左到右显示，服务器发送的是根据流量排好序的数据，但是我用bindload方法监听图片的加载情况，但是它不是按照服务器给的数据进行加载的导致，瀑布流的浏览量发生错乱，请问有没有好的方法按序加载<viewstyle=display:none<blockwx:for={{newAddEssays}}wx:key=d<!商铺文章<blockwx:if={{itemshopessayhead}}<blockwx:if={{itemshopessaycustom===1&&itemshopessaycustomhead!==}}<imagewx:key=idid={{itemshopeid}}{{index}}src={{imgHost}}{{itemshopessaycustomhead}}bindload=onImageLoaddatalast={{index===(newAddEssayslength1)?true:false}}<image<block<blockwx:else<imagewx:key=idid={{itemshopeid}}{{index}}src={{imgHost}}{{itemshopessayhead[0]}}bindload=onImageLoaddatalast={{index===(newAddEssayslength1)?true:false}}<image<block<block<!商品<blockwx:if={{itemhead}}<blockwx:if={{itemcustom===1&&itemcustomhead!==}}<imagewx:key=idid={{itempid}}{{index}}src={{imgHost}}{{itemcustomhead}}bindload=onImageLoaddatalast={{index===(newAddEssayslength1)?true:false}}<image<block<blockwx:else<imagewx:key=idid={{itempid}}{{index}}src={{imgHost}}{{itemhead[0]}}bindload=onImageLoaddatalast={{index===(newAddEssayslength1)?true:false}}<image<block<block<blockwx:if={{itemessayhead}}<blockwx:if={{itemessaycustom===1&&itemessaycustomhead!==}}<imagewx:key=idid={{itemeid}}{{index}}src={{imgHost}}{{itemessaycustomhead}}bindload=onImageLoaddatalast={{index===(newAddEssayslength1)?true:false}}<image<block<blockwx:else<imagewx:key=idid={{itemeid}}{{index}}src={{imgHost}}{{itemessayhead[0]}}bindload=onImageLoaddatalast={{index===(newAddEssayslength1)?true:false}}<image<block<block<block<viewonImageLoad:asyncfunction(e){letisLast=ecurrentTargetdatasetlast;consolelog(isLastis,isLast);letimageId=Number(ecurrentTargetidsplit()[0]);letimageIndex=Number(ecurrentTargetidsplit()[1]);consolelog(imageIndexis,imageIndex);letoImgW=edetailwidth;图片原始宽度letoImgH=edetailheight;图片原始高度letimgWidth=thisdataimageWidth;图片设置的宽度letscale=imgWidthoImgW;比例计算letimgHeight=oImgH*scale;自适应高度新请求的文章数据letimages=thisdatanewAddEssays;letimageLen=imageslength;letimageObj=null;for(leti=0;i<imageLen;i++){letimg=images[i];if(imgshopeid&&imgshopeid===imageId){imageObj=img;break;}elseif(imgpid&&imgpid===imageId){imageObj=img;}elseif(imgeid&&imgeid===imageId){imageObj=img;}}if(imageObj!==null){imageObjheight=imgHeight;记录下该图片是第几个被加载的imageObjindex=imageIndex;consolelog(imageObjis,imageObj);letloadingCount=thisdataloadingCount1;letcol1=thisdatacol1;letcol2=thisdatacol2;只要第一列的列高度小于第二列就往第一列放，否则往第二列放if(thisdatacol1H<=thisdatacol2H){thisdatacol1H+=imgHeight;col1push(imageObj);}else{thisdatacol2H+=imgHeight;col2push(imageObj);}consolelog(col1is,col1);consolelog(col1His,thisdatacol1H);consolelog(col2is,col2);consolelog(col2His,thisdatacol2H);thissetData({col1H:thisdatacol1H,col2H:thisdatacol2H})letdata={loadingCount:loadingCount,col1:col1,col2:col2,loadOver:true};if(!loadingCount){dataimages=[];}awaitthissetData(data,()={wxhideLoading();});if(isLast){consolelog(col1is,col1);consolelog(col2is,col2);渲染完图片之后将新加的文章添加到文章列表中去thisdatadataArraypush(thisdatanewAddEssays);对col1的每个元素进行排序和col2的每个元素进行排序thissetData({col1:thisdatacol1,col2:thisdatacol2,loadOver:true},()={wxhideLoading();})}}},
更多有关「微信小程序开发图片加载顺序问题」的讨论可以前往微信公开课小程序参与互动哦！了解更多