Javascript 如何让div在页面加载时根据图像重新调整大小_Javascript_Jquery_Dom

Javascript 如何让div在页面加载时根据图像重新调整大小

javascript jquery dom

Javascript 如何让div在页面加载时根据图像重新调整大小,javascript,jquery,dom,Javascript,Jquery,Dom,所以我的目标是在底部有3个可点击热点的图像幻灯片。我现在已经具备了这个功能的基本功能，但是我的contentdiv在第一次遍历图像之前无法正确调整大小。我需要一切的大小和位置正确，立即当页面加载 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(document).ready(f

所以我的目标是在底部有3个可点击热点的图像幻灯片。我现在已经具备了这个功能的基本功能，但是我的contentdiv在第一次遍历图像之前无法正确调整大小。我需要一切的大小和位置正确，立即当页面加载

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">     
        $(document).ready(function () {
            $("#image").attr("src", images[0]);         
        });     

        //Click tracking
        var badClicks = 0;
        var skipClicks = 0;
        var goodClicks = 0;

        //Counter to keep track of images
        var iCount = 0;
        var images = [];
        images[0] = "images/document.png";
        images[1] = "images/document2.png";
        images[2] = "images/document3.png";

        function nextImage(){
            iCount++;

            //If there are no more images in the array, go back to the first image
            if (images[iCount]==null) {
                iCount = 0;
            };

            //Change image source to new image
            $("#image").attr("src", images[iCount]);

            //Set content wrapper width & height to current image's width & height
            $("#content").css("width", $("#image").css("width"));
            $("#content").css("height", $("#image").css("height"));

            //Store content wrapper's new width and height into variables
            var h = parseInt($("#content").css("height"));
            var w = parseInt($("#content").css("width"));

            //Move hotspot-wrapper to the bottom of the new image
                //Height of content wrapper - height of hotspot wrapper = new top
            $("#hotspot-wrapper").css("top", h - parseInt($("#hotspot-wrapper").css("height")));


            console.log(images[iCount] + " h " + h + " w " + w);
        }

        //Do something with data for "bad" hotspot
        function bad(){
            badClicks++;
        }

        //Do something with data for "skip" hotspot
        function skip(){
            skipClicks++;
            nextImage();
        }

        //Do something with data for "good" hotspot
        function good(){
            goodClicks++;
        }

        //Show the collected data
        function displayResults(){
            $("#results").append("<br />Bad: " + badClicks 
            + " Skip: " + skipClicks 
            + " Good: " + goodClicks);
        }
    </script>
  </head>
  <body>
    <div id="content">      
        <img id="image" />
        <div id="hotspot-wrapper">
            <div id="hotspot-a" class="hotspot" onclick="bad();"></div>
            <div id="hotspot-b" class="hotspot" onclick="skip();"></div>
            <div id="hotspot-c" class="hotspot" onclick="good();"></div>
        </div>
    </div>
        <br />
        <div id="results" style="clear:both">
            <button onclick="displayResults();" style="text-align: center">Show results</button>
        </div>


$（文档）.ready（函数（）{
$（“#image”）.attr（“src”，images[0]）；
});     
//单击跟踪
var=0；
var skipClicks=0；
var=0；
//用于跟踪图像的计数器
var-iCount=0；
var图像=[]；
图像[0]=“images/document.png”；
images[1]=“images/document2.png”；
images[2]=“images/document3.png”；
函数nextImage（）{
iCount++；
//如果阵列中没有更多图像，请返回第一个图像
如果（图像[iCount]==null）{
i计数=0；
};
//将图像源更改为新图像
$（“#image”）.attr（“src”，images[iCount]）；
//将内容包装宽度和高度设置为当前图像的宽度和高度
$（“#内容”）.css（“宽度”）、$（“#图像”）.css（“宽度”）；
$（“#内容”）.css（“高度”）、$（“#图像”）.css（“高度”）；
//将内容包装器的新宽度和高度存储到变量中
var h=parseInt（$（“#content”）.css（“height”）；
var w=parseInt（$（“#内容”）.css（“宽度”）；
//将热点包装移动到新图像的底部
//内容包装高度-热点包装高度=新顶部
$（“#热点包装器”）.css（“顶部”，h-parseInt（$（“#热点包装器”）.css（“高度”））；
console.log（图像[iCount]+“h”+h+“w”+w）；
}
//对“坏”热点的数据进行处理
函数坏（）{
badClicks++；
}
//对“跳过”热点的数据执行某些操作
函数skip（）{
skipClicks++；
下一代（）；
}
//对“好”热点的数据进行处理
功能良好{
goodClicks++；
}
//显示收集的数据
函数displayResults（）{
$（“#结果”）.append（“
坏：”+badClicks
+“跳过：”+skipClicks
+“好：+goodClicks）；
}


显示结果

任何帮助、提示或建议都将不胜感激！谢谢

这是你的问题

 $("#image").css("width")

但是，您没有使用css设置图像的宽度。你需要使用

$('#image').width()

此外，为了安全起见，您只应在映像触发加载事件后继续执行这部分代码：

//Change image source to new image
$("#image").attr("src", images[iCount]).load(function(){

    //Set content wrapper width & height to current image's width & height
    $("#content").css("width", $("#image").width());
    $("#content").css("height", $("#image").height());

    //And then the rest...

这是你的问题

 $("#image").css("width")

但是，您没有使用css设置图像的宽度。你需要使用

$('#image').width()

此外，为了安全起见，您只应在映像触发加载事件后继续执行这部分代码：

//Change image source to new image
$("#image").attr("src", images[iCount]).load(function(){

    //Set content wrapper width & height to current image's width & height
    $("#content").css("width", $("#image").width());
    $("#content").css("height", $("#image").height());

    //And then the rest...

首先，与init images数组相比，我更喜欢这种方式：

var images = [];
var image = new Image();
image.src = '/some/image/url.jpg';
/* while you doing this image already load in background - so its faster way*/
images.push(image);

使用jQuery可以通过以下方式显示这些图像：

$('#parend_of_image_div').html(images[iCount]);

在

nextImage

函数中使用以下代码：

var img = images[iCount];
$(img).load(function(){
    var width = $(this).width()
    var height = $(this).height();
    /* do other stuff */
});

首先，与init images数组相比，我更喜欢这种方式：

var images = [];
var image = new Image();
image.src = '/some/image/url.jpg';
/* while you doing this image already load in background - so its faster way*/
images.push(image);

使用jQuery可以通过以下方式显示这些图像：

$('#parend_of_image_div').html(images[iCount]);

在

nextImage

函数中使用以下代码：

var img = images[iCount];
$(img).load(function(){
    var width = $(this).width()
    var height = $(this).height();
    /* do other stuff */
});

当您尝试获取图像的宽度/高度时，图像尚未加载。您应该预加载它们。您是否考虑过将所有内容都设置为可见性：隐藏到window.load（）触发器？请尝试预加载图像，或为每个图像设置图像标记，然后将其设置为可见性。当您尝试获取图像的宽度/高度时，图像尚未加载。您应该预加载它们。您是否考虑过将所有内容都设置为可见性：隐藏到window.load（）触发器？请尝试预加载图像，或为每个图像设置图像标记，然后将其设置为可见性。非常感谢！那正是我要找的！非常感谢你！那正是我要找的！我一定会把那个片段写下来！我一定会把那个片段写下来！