Question

我有一个dijit dialog，我需要根据图像的大小设置对话框大小。

要实现这一点，我需要在创建Dialog之前加载图像并从图像中获取属性。图像onload()方法无法满足我的要求，因为在创建对话框并将图像放在其上之前我需要大小。任何人都可以告诉我解决这个问题的方法吗？

提前感谢您的建议。

Answer 1

图片onload（）方法无法满足我的要求，因为我需要创建对话框并将图像放在其上之前的大小。

三个步骤：

在样式表中为图片指定默认值display: none，以便在加载时不显示（或占用任何空间）。
在图片加载时检测javascript，然后运行该功能以设置对话框大小。
使用javascript将display:none替换为display:block或display:inline-block。

Answer 2

您可以在实例化对话框之前获取图像属性。

请注意，dialog dijit会在窗口大于宽度时调整大小（因此无法强制修复）

这是一个片段点击 - ＆gt;运行示例后的整页

require(["dijit/Dialog","dijit/form/Button","dojo/domReady!"],function(Dialog,Button){
  
  var imageUrl = "https://cdn.elegantthemes.com/blog/wp-content/uploads/2015/02/custom-trackable-short-url-feature.png";
  
  var dialog 
  var image = new Image();
  
  // passing src image url to call onload function without add to dom
  image.src = imageUrl;

  image.onload = function(e) {
  	console.log(image.width);
    console.log(image.height);
    
    dialog = new Dialog({
      title: "My Dialog",
      /* if you want to pass the image */
      content: "<img src='"+imageUrl+"' />",
      style: "width:"+image.width+"px" 
    }); 
  }
  
  var btn = new Button({
        label: "Show me !",
        onClick: function(){
            dialog.show();
        }  
    }, "btn").startup();
	
});

<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css" rel="stylesheet"/>

<body class="claro">
  <div id="btn"></div>
</body>

获取图像大小并相应地设置div大小

2 个答案: