Question

在使用这个.html页面时，我发现了一种烦人的行为。我加载页面的那一刻它只会加载页面的某些部分，如果我刷新它，然后正确加载。为什么会这样？我已将图像与我的HTML代码一起附加。

第一张图片是我得到的，第二张图片是所需的图片。

这是第一张图片 enter image description here

这就是我的要求

enter image description here

这是我的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>Imperial</title>
<style> 
    .smooth_zoom_preloader {
        background-image: url(zoom_assets/preloader.gif);
    } 
    .smooth_zoom_icons {
        background-image: url(zoom_assets/icons.png);
    } 
</style>

<link href="./css/style.css" type="text/css" rel="stylesheet" />
<link type='text/css' href='./js-disclaimer/basic.css' rel='stylesheet' media='screen' />

<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script>
<script type='text/javascript' src='./js-disclaimer/basic.js'></script>
<script src="./js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="./js/custom.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<script src="zoom_assets/jquery-1.9.1.min.js"></script>
<script src="zoom_assets/jquery.smoothZoom.min.js"></script>
<script>
    jQuery(function($){
        $('#yourImageID').smoothZoom({
            width: '80%',
            height: '70%',

            /******************************************
            Enable Responsive settings below if needed.
            Max width and height values are optional.
            ******************************************/
            responsive: false,
            responsive_maintain_ratio: false,
            max_WIDTH: '',
            max_HEIGHT: ''
        });
    });
</script>

</head>

<body style="background:none">

  <!-- home -->
    <!---- menu area--->
    <div class="menu_area"> <img src="./img/logo.png" alt=""> <br>
     <ul>
        <li class="current"><a href="index.html" title="Home">Home</a></li>
        <li><a href="worldaboveworld.html" title="world">World above the world</a></li>
        <li><a href="spaces.html">Spaces</a></li>
        <li><a href="safety.html" title="safety">Safety &amp; Security</a></li>
        <li><a href="plan.html">Plans</a></li>
        <li><a href="location.html">Location</a></li>
        <li><a href="enquiry.html" title="enquiry">Enquiry</a></li>
        <li><a href="address.html" title="contact">Contact Us</a></li>
        <br>
        <br>
        <li><a href="aboutsdk.html" title="SD">About SD Corp.</a></li>
    <li><a href="img/IE Bro20713 copy.pdf">ebrochure</a></li>
      </ul>
    </div>
    <div class="NorthMarker" id="North" style="position:absolute;top:66%;left:18%;width:10px;height:10px; z-index: 99;">
         <img src="img/NorthView.png" id="northview">
      </div>

         <div class="SouthMarker" id="South" style="position:absolute;top:66%;left:97%;width:10px;height:10px; z-index: 99;">
         <img src="img/SouthView.png" id="southview">
      </div>


    <div style="float:left; margin-top:5%; margin-left:5%;"><img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/> 
        <div class="intermediate" style="display:none;position:absolute;left:0%;top:0%;background-color:rgba(0, 0, 0, 0.0);width:100%;height:100%;z-index:104;"></div>
        <div class="northviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
            <img src="img/40N.jpg" style="width:100%;height:250px;">
        </div>

        <div class="southviewpart" style="display:none;position:absolute;top:27%;left:0%;width:100%;height:10px; z-index: 109;">
            <img src="img/40S.jpg" style="width:100%;height:250px;">
        </div>
        <div id="basic-modal" class="footer_for_plan">© SDCPL 2013. All Rights Reserved&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#" class="basic">Disclaimer</a></div>  
    </div>  


<!-- modal content -->
<div id="basic-modal-content">
  <h3>Disclaimer</h3>
  <p>The content depicted herein is for general information and purely conceptual and is not legal offering nor will it be part of any binding document. The Developer reserves the right to delete, modify or supplement the content at any time for any reason without prior notification.</p>
</div>
</div>
</div>
</body>
</html>

Answer 1

这里的问题是加载JavaScript文件..最后移动所有脚本标记。在关闭身体标签之前。希望它好起来

Answer 2

如果我不得不猜测（因为我喜欢赌博），我会说这与...有关...

加载3份 jQuery
以句点

href=""

src=""

url()

以下是我发现的jQuery实例：

<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>

我不是100％肯定第一个是什么，因为它是一个本地文件，但如果它的文件名是任何迹象......它是jQuery。

长话短说：

删除此行：

<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>

并删除此行：

<script src="zoom_assets/jquery-1.9.1.min.js"></script>

Answer 3

我认为页面已加载，问题在于smoothZoom缩放，如果您仔细看到图片已加载但已完全缩小

也改变你的

<img id="yourImageID" src="img/plan.jpg" width="86%" height="70%"/>

与

<img id="yourImageID" src="img/plan.jpg" style="width:86%; height:70%"/>

修改

你的脚本中还包含三个jquery文件，你需要摆脱它们的至少。选择一个要保留的文件并将其移至顶部

我建议你保留

<script src="zoom_assets/jquery-1.9.1.min.js"></script>

将文件移至根目录并将该行移至顶部

++ <script src="jquery-1.9.1.min.js"></script> -- <script type='text/javascript' src='./js-disclaimer/jquery.js'></script> <script type='text/javascript' src='./js-disclaimer/jquery.simplemodal.js'></script> <script type='text/javascript' src='./js-disclaimer/basic.js'></script> <script src="./js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="./js/custom.js" type="text/javascript"></script> -- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> -- <script src="zoom_assets/jquery-1.9.1.min.js"></script> <script src="zoom_assets/jquery.smoothZoom.min.js"></script>

Answer 4

use this 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
instead of all these three...
<script type='text/javascript' src='./js-disclaimer/jquery.js'></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="zoom_assets/jquery-1.9.1.min.js"></script>

Answer 5

当脚本加载时无法找到您创建的div ID，因为您在创建img dom elemnet之前加载了img

Answer 6

我感谢所有人的努力，但是只有在我使用chrome验证器验证文档后，我的问题才得到解决。

我曾使用“％”来显示图像的宽度和高度。我必须输入一些数值（根据需要）。现在工作正常。

但我仍然想知道如何才能使它适合不同的屏幕尺寸和分辨率？

Html页面没有完全加载

6 个答案:

长话短说：