Question

我正在开发一个asp.net mvc Web应用程序，其中包含一个与此web templete类似的Web模板。

现在我遇到了这个问题： -

让用户访问图片库，在页面加载时，他点击图片。那么这将导致图像单独显示在新窗口内而不是在jQuery滑块内。如果他等到页面满载，那么就不会有任何问题。

我无法理解的是，我在呈现页面主体之前引用了所有脚本。所以这意味着除非所有脚本都被完全加载，否则图片库不应该在浏览器中可用，但事实并非如此。

这是我的_layout视图的样子，我在Renderbody()之前引用所有脚本： -

<!DOCTYPE html>
<html>
<head>   

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="~/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="~/img/favicon.ico" type="image/x-icon" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="">
    <title>@ViewBag.Title  </title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/Customcss")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @RenderSection("scripts", required: false)
</head>
<body>
    <!--==============================header=================================-->


          <!-- <div class="container body-content">-->
            @RenderBody()

以下是造成问题的视图： -

<header id="header" class="headerpages">
    <div class="bgpattern"></div>
    @Html.Partial("~/Views/Shared/Navigation.cshtml")
</header>
<div id="content">
    <!--==============================row7=================================-->
    <div class="row_7">
        <div class="container">
            <h2 style="text-align:center"  >Project</h2>

            <br/>
            <div class="row">
                <h2 class="padbot1">
                    Villa
                </h2>

                    <ul class="listgall">

                        <li class="col-lg-4 col-md-4 col-sm-6  col-xs-6 colgal customBoarder">
                            <h5 class="customh5">Villa</h5>
                            <figure><a href="~/img/T/sbig.jpg" class="thumb"><img src="~/img/T/a.jpg" alt=""><span><strong>Project name:</strong><em>Villa</em><img src="~/img/T/searchsmall.png" alt=""></span></a><a href="@Url.Action("OurProjects", "Home", new  {name="a" })" class="btn btn1">Read More about this vella<br /> </a></figure>
                        </li>


                    </ul>
                <hr style="border-width: 3px 0 0;"/>
                <h2 class="padbot1">
                    Triplex</h2>
                    <ul class="listgall">
                        <li class="col-lg-4 col-md-4 col-sm-6  col-xs-6 colgal customBoarder">
                            <h5 class="customh5">The TROJANA (Macedonian Oak) Triplex</h5>
                            <figure><a href="~/img/T/trojana_big.jpg" class="thumb"><img src="~/img/T/trojana.jpg" alt=""><span><strong>Project name:</strong><em>The TROJANA (Macedonian Oak) Triplex</em><img src="~/img/T/searchsmall.png" alt=""></span></a><a href="@Url.Action("OurProjects", "Home", new  {name="Trojana" })" class="btn btn1">Read More</a></figure>
                        </li>
                    </ul>
                <hr style="border-width: 3px 0 0;" />
                                @Html.Partial("~/Views/Shared/_table.cshtml")





</div>


            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 gmap">
                    <div class="map">

                        <iframe src="https://www.google.com/maps/embed/v1/place?key=A...."></iframe></div>


                </div>
            </div>
        </div>
    </div>

</div>
@section scripts {
<script>
    $(window).load(function () {

        //form1
        $('#form1').sForm({
            ownerEmail: '#',
            sitename: 'sitename.link'
        })

        //thumb
        // Initialize the gallery
        $('.thumb').touchTouch();


    });
</script>
    <style>
        #prevArrow, #nextArrow {
  display: none;
}
    </style>

所以有人可以尝试如何解决这个问题吗？以及为什么在浏览器仍在加载脚本时，图库将在浏览器中可用???

Answer 1

我知道这个问题已经解决，但对于访问这里的人来说，以防其他人遇到同样的问题并在这里找到它。正如https://stackoverflow.com/users/575199/malk所评论的那样使用

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});

而不是

    $(window).load(function() {
     // executes when complete page is fully loaded, including all frames, objects and images
     alert("window is loaded");
    });

以下代码可防止用户在页面完全加载之前单击文档（图像或其他任何内容）。将$(document).click(false);添加到$(document).ready功能，将$(document).click(true)添加到$(window).load function。

$(document).ready(function() {
    $(document).click(false);
});
$(window).load( function(){ 
    $(document).click(true);
});

如何防止在所有脚本完全加载之前单击图像

1 个答案: