账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    JS图片预览问题,导致后续函数不执行问题?
    25
    0

    以下是代码片段
    使用的JS本地预览图片,上传后加载到预先写好的DIV中,然后图片加载完成后后续函数弹出的提示 很快背覆盖
    甚至其他功能弹出的提示也并不能使用,困惑很久,求解答。

    function PreviewImage(divImage, upload) {
        if (checkPic()) {
            try {
                //console.log(upload.files[0]);
                var imgPath = getObjectURL(upload.files[0]);
                // $(".divImage").css("background","url(imgPath)")
                document.getElementById(divImage).innerHTML = "<img id='imgPreview' class='bgimg1' src='" + imgPath + "' width='" + '100%' + "' height='" + '100%' + "'/>";
                $(".menu").hide();
                $(".menuswitch1").removeClass('menuswitch1').addClass('menuswitch');
                var appElement = document.querySelector('[ng-controller=screenCtrl]');
                var $scope = angular.element(appElement).scope();
                $(".success_text").html("更改背景图片成功");
                $scope.$apply(function () {
                    $scope.success_display = false;
                })
                setTimeout(function () {
                    $scope.$apply(function () {
                        $scope.success_display = true;
                    })
                }, 2000);
            } catch (e) {
                alert("无法预览图片");
            }
        }
    }
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • こ無字情書ζ 普通会员 1楼

      在JavaScript中,图片预览涉及到JavaScript代码在页面加载后,对图片的处理和展示。以下是一些可能导致图片预览功能不执行或出现其他问题的原因,并给出相应的解决方案:

      1. 图片不存在或未加载:这是最常见的问题,由于图片没有在HTML文档中被正确地插入,或者加载失败。确保在图片src属性中使用正确的URL,并确保图片加载后在浏览器中可见。你可以在图片加载完成后使用document.getElementById('imageElement')获取到图片元素,然后检查其src属性是否为图片的完整URL。

      ```javascript function displayImage() { var imageElement = document.getElementById('imageElement'); if (!imageElement) { console.log('Image element not found'); return; }

      // 图片预览逻辑
      // ...
      

      } ```

      1. 图片的宽度或高度设置不当:如果你的图片宽度或高度设置得过小,浏览器可能会尝试调整视口以适应图片,从而导致预览失效。确保图片的宽度和高度在浏览器的视口范围内,或者使用CSS媒体查询为不同的设备设置不同的宽度和高度。

      ```javascript function displayImage() { var imageElement = document.getElementById('imageElement'); if (!imageElement) { console.log('Image element not found'); return; }

      // 图片预览逻辑
      // ...
      // 使用CSS媒体查询为不同的设备设置不同的宽度和高度
      if (window.innerWidth < 768) {
          imageElement.style.width = '300px';
          imageElement.style.height = '200px';
      } else {
          imageElement.style.width = '400px';
          imageElement.style.height = '300px';
      }
      

      } ```

      1. JavaScript代码没有正确处理图片:在JavaScript中,你可以使用img.onload属性来检查图片是否已经加载完成,但是这个属性在某些情况下可能会失效,特别是在网络延迟或浏览器兼容性问题的情况下。在这种情况下,你可以使用new Image()构造函数创建一个新的图片元素,并在加载完成后调用load方法来处理图片。同时,确保图片元素的src属性为图片的完整URL,而不是'http://example.com/image.jpg'

      javascript function displayImage() { var imageElement = new Image(); imageElement.src = 'http://example.com/image.jpg'; imageElement.onload = function() { if (this.complete) { // 图片加载完成,执行预览逻辑 // ... } else { console.log('Image loading failed'); } }; }

      1. 图片路径错误:确保图片路径指向正确的文件夹或文件,避免图片在浏览器中找不到。在浏览器中,可以使用file:///路径来指定文件路径,但在实际开发中,通常推荐使用相对路径或绝对路径。

      ```javascript function displayImage() { var imageElement = document.getElementById('imageElement'); if (!imageElement) { console.log('Image element not found'); return; }

      // 图片路径错误,显示错误信息
      console.log('Image path is incorrect');
      

      } ```

      1. 图片是否被JavaScript阻止:在某些浏览器中,例如火狐浏览器,JavaScript可以阻止HTML元素在页面加载后被加载到屏幕中。你可以使用window.onload事件的preventDefault()方法来阻止该事件的发生,以便在图片加载完成后执行预览逻辑。

      ```javascript window.onload = function() { var imageElement = document.getElementById('imageElement'); if (!imageElement) { console.log('Image element not found'); return; }

      // 图片加载完成后,阻止JavaScript事件的发生
      imageElement.addEventListener('load', function() {
          if (this.complete) {
              // 图片加载完成,执行预览逻辑
              // ...
          } else {
              console.log('Image loading failed');
          }
      }, false);
      

      }; ```

      以上就是可能导致图片预览功能不执行或出现其他问题的一些常见原因,并提供相应的解决方案。在实际开发中,你应该根据具体的项目需求和浏览器兼容性进行适当的调整。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部