精华内容
下载资源
问答
  • 好久没有写PC的页面,今天写了一把,然后被一个小问题纠结了好久:JQ获取图片高度为0。 不多说,上代码: #box > img { margin-bottom: 20px; width: 100%; } </style><div id="box"> <img src="xxx" />

    好久没有写PC的页面,今天写了一把,然后被一个小问题纠结了好久:JQ获取图片高度为0。
    不多说,上代码:

    <style>
        #box > img {
            margin-bottom: 20px;
            width: 100%;
        }
    </style>
    
    <div id="box">
        <img src="xxx" />
        <img src="xxx" />
        <img src="xxx" />
        <img src="xxx" />
        <img src="xxx" />
        ......
    </div>

    我的初衷很简单,就是获取#box的高度,当然,利用JQ的写法也很容易:

    <script type="text/javascript">
        $(function() {
            .....
            var _boxH = $('#box').outerHeight();
            .....
        });
    </script>

    这样就可以成功获取到box的高度。后来在调试过程中,页面在CHROME上跑确实也没有问题,可是到了QQ浏览器,2345浏览器还有搜狗浏览器上的时候,问题来了,在使用这个方法去获取box的高度的时候,获取到的始终是100,也就是margin的总高度。显而易见,问题的原因是这个方法并没有获取到图片的高度。
    起初我的猜想是可能因为我没有设置图片块状显示,所以导致高度无法获取,于是,我便在css中设置了图片的样式为:

    #box > img {
        margin-bottom: 20px;
        display: block;
        width: 100%;
    }

    然鹅。。。并没有什么卵用。这就很扎心了。一筹莫展。
    最终,在多方查找资料之后,终于找到了解决问题的方法:$(window).load()方法,在页面加载的时候就获取到相应的高度。

    .....
    $(window).load(function() {
        var _boxH = $('#box').outerHeight();
    });
    .....

    遂,问题解决。

    展开全文
  • imageLoad: function (e) {//获取图片真实宽度 var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; console.log(imgwidth, imgheight) //计算的高度值 ...

    效果图:

    indicator-active-color="#007aff"//当前选中的指示点颜色 

    js:

    const app = getApp()
    
    Page({
      data: {
         //-----------模拟banner图-----------
        imgUrls: [
          '/image/1545118381903.jpg',
          '/image/1545118566631.jpg'
        ],
        circular: true,
        //是否显示画板指示点  
        indicatorDots: true,
        //选中点的颜色  
        //是否竖直  
        vertical: false,
        //是否自动切换  
        autoplay: true,
        //自动切换的间隔
        interval: 3000,
        //滑动动画时长毫秒  
        duration: 1000,
        //所有图片的高度  
        imgheights: [],
        //图片宽度 
        imgwidth: 750,
        //默认  
        current: 0
      },
      imageLoad: function (e) {//获取图片真实宽度  
        var imgwidth = e.detail.width,
          imgheight = e.detail.height,
          //宽高比  
          ratio = imgwidth / imgheight;
        console.log(imgwidth, imgheight)
        //计算的高度值  
        var viewHeight = 750 / ratio;
        var imgheight = viewHeight;
        var imgheights = this.data.imgheights;
        //把每一张图片的对应的高度记录到数组里  
        imgheights[e.target.dataset.id] = imgheight;
        this.setData({
          imgheights: imgheights
        })
      },
      bindchange: function (e) {
        // console.log(e.detail.current)
        this.setData({ current: e.detail.current })
      },
       }
    })

    wxml:

    <!-------------首页轮播图-----------------  -->
    <view class='swiper'>
      <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
        <block wx:for='{{imgUrls}}' wx:key="{{index}}">
          <swiper-item>
            <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" />
          </swiper-item>
        </block>
      </swiper>
    </view>

    wxss:

    .swiper image {
      width: 100%;
      height: auto;
    }
    
    .swiper-image {
      height: 100%;
      width: 100%;
    }
    
    .slide-image {
      height: 100%;
      width: 100%;
      display: block;
    }

     

    展开全文
  • 问题描述: 因为埋点的需要,需要判断一个产品是否进入...为什么会出现这种情况啊,明明是在componentDidMount中做的处理,该生命周期函数运行的时候不是页面dom都加载完了吗,那不应该获取不到图片高度啊? 是不是...

    问题描述:
    因为埋点的需要,需要判断一个产品是否进入用户可视区域,在实现过程中出现:
    每次新打开一个窗口,使用element.getBoundingClientRect().top去获取一个产品的top值都是错的,但是刷新页面,值又正常了。

    思考过程:
    为什么会出现这种情况啊,很有可能是因为一个产品卡片中包含了图片导致的。。但是我明明是在componentDidMount中做的处理,该生命周期函数运行的时候不是页面dom都加载完了吗,那不应该获取不到图片高度啊?
    是不是react中所谓的dom加载完成就类似于jquery的ready,只是dom的结构加载完毕,便视为加载完成,并不会考虑图片是否加载完成,如果图片没有加载完成,那结果就是获取图片高度为0,程序出错?那怎么解决这个问题?

    解决方案:

    1. 人为计算图片在不同设备下的高度,并且在componentDidMount第一行就把这个高度赋给元素。这种方式需要知道图片的展示尺寸(width,height), 然后通过当前设备的宽度按照比例计算出在当前设备的高度,
    	window.removeEventListener('resize', this.resizeFunction)
      	//计算在当前设备中图片的高度,PLAY_IMAGE_MARGIN_TOTAL图片margin, IMAGE_SIZE:图片尺寸
        setPlayImageHeight = async() => {
            const viewPortW = document.body.offsetWidth || document.documentElement.offsetWidth
            let playImageHeight = (viewPortW - PLAY_IMAGE_MARGIN_TOTAL) * (IMAGE_SIZE.height / IMAGE_SIZE.width)
            this.setState({playImageHeight})
        
    
    1. 设置定时器延迟获取图片高度
      既然图片未加载完成之前获取不到高度那就延迟获取这个高度,主要思路就是设置一个定时器并使用一个flag标志是否可视区域内的图片均加载完成,如果图片尚未加载完成就继续循环判断,如果已经加载完成就可以获取高度了
    2. 使用占位图

    总结:之后凡是遇到含有图片加载的,然后又需要计算高度的,都要注意图片未加载完成所带来的影响。

    参考:https://www.imooc.com/article/12651

    展开全文
  • JS获取图片高度的值为0问题

    千次阅读 2018-08-09 17:43:47
    很有可能是因为图片还未加载完毕,可以调整获取图片属性的位置。 Image 对象的属性 属性 描述 align 设置或返回与内联内容的对齐方式。 alt 设置或返回无法显示图像时的替代文本。 border 设置...

    很有可能是因为图片还未加载完毕,可以调整获取图片属性的位置。

    Image 对象的属性

    属性 描述
    align 设置或返回与内联内容的对齐方式。
    alt 设置或返回无法显示图像时的替代文本。
    border 设置或返回图像周围的边框。
    complete 返回浏览器是否已完成对图像的加载。
    height 设置或返回图像的高度。
    hspace 设置或返回图像左侧和右侧的空白。
    id 设置或返回图像的 id。
    isMap 返回图像是否是服务器端的图像映射。
    longDesc 设置或返回指向包含图像描述的文档的 URL。
    lowsrc 设置或返回指向图像的低分辨率版本的 URL。
    name 设置或返回图像的名称。
    src 设置或返回图像的 URL。
    useMap 设置或返回客户端图像映射的 usemap 属性的值。
    vspace 设置或返回图像的顶部和底部的空白。
    width 设置或返回图像的宽度。

     

    可查看官方文档:http://www.w3school.com.cn/jsref/prop_img_width.asp

    展开全文
  • if ( window . FileReader ) { var image = ...图片读取事件 image . onload = function () { var height = image . naturalHeight ; var width = image . naturalWidth ; } }
  • 日前,本技术屌丝又遇到了一个很有意思的问题,应项目要求,需要在页面加载完毕之后获取图片高度,以此来调整图片上面的覆盖层相对于图片顶端的位置。 但在jquery(function(){ /*XXXXXX*/});里面写了之后发现不是...
  • $(document).ready(function () { $('#tab1 img').each(function () { AutoResizeImage(this); }) }); function AutoResizeImage(objImg) { var img = new Image();...alert出来的全是0,应该如何获取
  • PHP如何获取图片高度和宽度

    千次阅读 2006-04-14 12:05:00
    Discount Ugg BootsPHP默认关闭获取高度和宽度的功能,首先要启用该功能:1、在PHP安装目录下找到ext/php_gd2.dll,我这边的版本为5.1.2.2,将它复制到C:/WINDOWS/system32;2、打开C:/WINDOWS/php.ini,搜“gb”...
  • 大家经常会使用到 最重要的是上传时候为了能让上传的图片立马...下面介绍兼容IE和FF的获取图片高宽的办法: 第一步,声明全局image对象 var img = new Image(); 这个是为了能够让脚本可以只对一个Image对象进行处理,而
  • java File上传图片获取图片宽度高度

    千次阅读 2015-11-10 15:03:39
    package util; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.... * 通过java获取图片的宽和高 * @author sunlightcs * 2011-6-1 * http:
  • java上传图片的时候,怎么获取上传的图片高度和宽度,通过实际的高度和宽度,设置图片缩略图的高度和宽度,求代码,谢谢~!
  • 获取图片宽度和高度的方法

    千次阅读 2018-11-06 14:23:58
    零: //先由http访问,如果可以正常访问图片,再取宽度和高度  public static boolean isAskedByUrl(String urlStr){  try {  URL url = null;  url = new URL(urlStr);  HttpURLConnection con = (HttpURLC....
  • Android获取图片的宽度和高度

    万次阅读 2017-05-05 16:49:43
    获取图片的宽高: BitmapFactory.Options options = new BitmapFactory.Options(); BitmapFactory.decodeResource(getResources(),R.drawable.ico,options); //获取图片的宽高 int height = options.o
  • 微信小程序图片等比例缩放 动态的获取图片高度和宽度 动态的设置图片的高度和宽度  在小程序布局中,如果图片不是固定高度高度,但image设置的是固定的高度和宽度,这时候原始图片相对image设置的固定高度和...
  • PHP获取图片等比例高度

    千次阅读 2013-03-20 15:45:23
    * 获取等比高宽 * @param string $image_path 最大宽度 * @param int $max_width 最大宽度 * @param int $max_height 最大高度 */ function getRatioSize($image_path, $max_width='', $max_height=''){ list...
  • 我设置图片的宽200px;实际宽600px;我如何获取600
  • java获取图片的宽度和高度

    万次阅读 2018-01-28 16:26:38
    package com.suobei.test; import javax.imageio.ImageIO; import javax.swing.*; import java.awt.*; import java.awt.image.BufferedImage; import java.io.File; import java.io.... * 获取图片的宽度和高
  • 常见通过BitmapFactory获取图片的宽高度的代码如下: BitmapFactory.Options options = new BitmapFactory.Options(); options.inJustDecodeBounds = true; Bitmap bitmap = BitmapFactory.decodeFile("{IMAGE_PATH}...
  • 使用ImageIO来获取图片高度

    千次阅读 2015-09-12 18:21:09
    public static void main(String[] args) throws IOException { File file = new File("F:\\111.jpg"); FileInputStream in =...//获取高度 int width = bi.getWidth();//获取宽度 }
  • 1.获取图片宽度和高度 1.您可以使用 System.Drawing.Image 类 System.Drawing.Image img = System.Drawing.Image.FromFile(Server.MapPath("example.gif"));int width = img.Width;int height = img.Height;img....
  • jQuery获取隐藏元素高度,了解一下   &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt...
  • Bitmap获取图片高度与宽度

    千次阅读 2014-08-07 11:28:29
    主要代码如下:
  • 根据url获取图片高度和宽度

    千次阅读 2016-11-24 14:22:41
    //document.documentElement.clientWidth //IE中,设置浏览器高度 //document.documentElement.clientHeight //IE中,设置浏览器宽度 } } img.onerror = function () { callback({ "w": ...
  • 获取图片真实的宽度和高度

    千次阅读 2017-05-02 10:43:02
    //获取浏览器的宽度$(".new_mess_c img").each(function(i){var img = $(this);var realWidth;//真实的宽度var realHeight;//真实的高度//这里做下说明,$("")这里是创建一个临时的img标签,类似js创建一个new Image...
  • 基础操作,记录一下 Bitmap获取对应图片宽高: ...//获取图片的宽 Bitmap.getHeight();//获取图片的高 Drawable类型图片获取宽高方式: Drawable.getIntrinsicWidth(); Drawable.getIntrinsicHeight(); ...
  • PHP获取图片宽度高度、大小尺寸、图片类型、用于布局的img属性 //php自带函数 getimagesize() $img_info = getimagesize('tomener.jpg'); echo '<pre>'; print_r($img_info); 输出: Array ( [0] =>...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 156,423
精华内容 62,569
关键字:

获取图片高度