项目中遇到的问题-图片未加载成功

爱被打了一巴掌 2022-06-17 04:55 205阅读 0赞

# 问题 #

有一个功能是，点击图片进行预览。当时在测试的时候发现新加入的图片，点击后只有一层黑的遮罩，预览图片看不见。

//加入image节点
    var str = "";
    str+='<img class="modal-img" src="'+ $(this).attr("src") +'">';
    $("body").append(str);
    $(".modal-img").each(function() { 
        new RTP.PinchZoom(this, {}); //执行方法
    });

# 可能原因 #

后来输出日志发现，图片的高度为0。应该是图片未加载完，就去执行**new RTP.PinchZoom(this, \{\})**了。

# 解决办法 #

用**img.onload**确保图片加载完

$(".modal-img").each(function() { 
        var img = new Image(),self = this;
        img.src = this.src;
        img.onload = function(){ 
            new RTP.PinchZoom(self, {});
        }
    });

参看参考链接

> 浏览器加载起来非常快,几乎在给img赋值src的时候,图片就已经加载完成,同时触发了onload事件,代码中为onload赋值的语句就相当于在onload事件发生后,这时候已经晚了.

所以优化的方案是

$(".modal-img").each(function() { 
        var img = new Image(),self = this;
        img.onload = function(){ 
            console.log('imgLoad');
        }
        img.src = this.src;
        new RTP.PinchZoom(self, {});
    });

# 参考 #

[src与onload][src_onload]

[src_onload]: http://www.jianshu.com/p/d3a02ffe94b6

发表评论取消回复

表情：

评论列表（有 0 条评论，205人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue项目中实现图片懒加载（marksheng）

实现方法(使用vue的vue-lazyload插件) 1.安装插件 > `npm install vue-lazyload --save-dev` 2.在入

小咪咪/ 2023年01月03日 01:21/ 0 赞/ 223 阅读

相关 vue指令处理图片加载错误，判断图片可否加载成功

vue指令处理图片加载错误，判断图片可否加载成功 v-real-img 指令全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img

超、凢脫俗/ 2022年11月17日 13:47/ 0 赞/ 618 阅读

相关 uni 页面加载完毕_uni-app图片未加载完处理

实现效果 1.图片未加载完看到的是 .new-img占位背景图片,.new\_back透明度设置0; 2.图片加载失败显示设置的 loadImg 失败占位图片 3.图片加

谁借莪１个温暖的怀抱￠/ 2022年10月26日 14:06/ 0 赞/ 515 阅读

相关 html5 数据懒加载图片,动态列表页图片懒加载，再次获取数据时图片加载不成功...

首先描述一下功能实现列表页动态加载通过官方提供的"下拉刷新和上拉刷新"及"图片懒加载"示例实现。然后说一下bug 1.首次加载时图片可以获取成功， 2.再次加载

￡神魔★判官ぃ/ 2022年10月06日 10:50/ 0 赞/ 362 阅读

相关 UIImage加载网路图片时https加载不成功的解决方法

1.http协议的网络图片方法 +(UIImage ) getImageFromURL:(NSString )fileURL{

逃离我推掉我的手/ 2022年07月14日 02:38/ 0 赞/ 238 阅读

相关项目中遇到的问题-图片未加载成功

问题有一个功能是，点击图片进行预览。当时在测试的时候发现新加入的图片，点击后只有一层黑的遮罩，预览图片看不见。 //加入image节点 var

爱被打了一巴掌/ 2022年06月17日 04:55/ 0 赞/ 206 阅读

相关 javascript 修改图片地址（判断图片是否加载成功）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

àì夳堔傛蜴生んèń/ 2021年11月24日 01:50/ 0 赞/ 344 阅读

相关 vue 文件加载项目中图片文件方式

1.图片和文件在相同目录中 ![20200805141511658.png][] 1）加载 bj.png <img :src="require('

Dear 丶/ 2021年08月31日 23:48/ 0 赞/ 399 阅读

相关 Android glide加载本地图片遇到的问题

> 问题：加载本地图片一直加载不出来，也不知道是哪里出现的问题，以为是图片命名的方式，试了也没用，后面又看了glide的源码发现glide加载本地图片也是用的那样的方法，后面问

迷南。/ 2021年06月24日 16:10/ 0 赞/ 1084 阅读

相关如何判断网页中图片加载成功或者失败？

如何判断网页中图片加载成功或者失败？判断网页中图片加载成功或者失败的方法：页面上有用户自定义图片的时候经常会出现用户定义的图片特别是站外图片被删除或无法访问，因此，需...

朱雀/ 2020年07月02日 07:14/ 0 赞/ 844 阅读