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

我有dijit dialog，我需要根据图像的大小设置对话框大小。获取图像大小并相应地设置div大小

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

在此先感谢您的建议。

来源

2016-11-25 Abhishek Mukherjee

你可以使用body.onload（） – GraveyardQueen

显示你已经尝试过。如果您在创建对话框之前需要大小，那么在您的图像上创建它，而不是在之前 –

您可以加载图像（'var i = new Image（）; i.src =“url”;'），等到它加载，然后创建对话框，然后将图像添加到它。它被缓存，所以它会立即出现。 –

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

三个步骤：

给图像display: none默认的样式表，以便它不显示（或占用任何空间）时，它加载。
当图像加载时，javascript检测到，然后运行函数来设置对话框大小。
使用javascript替换display:none与display:block或display:inline-block。

来源

2016-11-25 10:18:13 Rounin

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

注意，当窗口比它的宽度更少的，更大的dialog的dijit调整大小（所以你不能强迫一个固定的）

这里是一个片段点击 - >乳宁样品

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) { 
 
    \t 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(); 
 
\t 
 
});

<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>

后全页

来源

2016-11-29 13:34:34

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

回答

相关问题