how to prevent clicking on an image until all the scripts is fully loaded

Question

I am working on an asp.net mvc web application which contain a web template similar to this web templete.

now i am facing this problem:-

let say a user access the image gallery , and while the page is loading , he clicks on an image. then this will cause the image to be displayed seperately inside a new windows and not inside the jQuery slider. while if he wait till the page fully loaded then there will not be any problem.

what i can not understand is that i am referencing all the scripts before rendering the page body. so this mean that the image gallery should not be available in the browser unless all the scripts are being fully loaded, but this is not the case.

here is how my _layout view looks like, where i am referencing all the scripts before the 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()

and here is the view that is causing the problem :-

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

so can anyone adivce how to fix this problem ? and why the image gallery will be available in the browser while the browsers is still loading the scripts ???

Does it work if you wait? This seems like it could be a problem with the javascript not having any images to grab. — Shelvacu, Sep 02 '15 at 22:29
Check this link: http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load — Malk, Sep 02 '15 at 22:31
yes as i said if i wait till the page is fully loaded , then i will not have any problem .. but you know this is a public web site and users might click on an image when they see it inside their browser without waiting for the browser to stop loading — John John, Sep 02 '15 at 22:32
@Malk so you mean i might try changing $(window).load t be document.ready() ? — John John, Sep 02 '15 at 22:34
Render the section when the page has been loaded :) at the end of the page. as render is the entry point for the script. — aimme, Sep 02 '15 at 22:38
@john G try remove "section scripts {}" leave the script content as it is. — aimme, Sep 02 '15 at 22:45
@aimme i changed the window.load to be document.ready and seems it fix the problem,, not sure why ... — John John, Sep 02 '15 at 22:47
@johnG good to know that. That's what i was trying to recommend at first :) — aimme, Sep 02 '15 at 22:48
@aimme i am really confused what is going on .... now when using window.load the script should not fire unless the whole page loads,, so why if i click on an image while the page loads the image will open in a new window.. — John John, Sep 02 '15 at 22:50
@johnG document.ready waits for all the html element(DOM) to be loaded and ready before calling to any js function inside it. :) — aimme, Sep 02 '15 at 22:50
@johnG window load might finish before the document is ready. that's two separate thing.first the window loads then the content inside it load, ie DOM elements. and finally the whole document is ready with everything it should include :) — aimme, Sep 02 '15 at 22:53
but this is not correct, becuase window load will come after document.ready and not before it !!! check this http://stackoverflow.com/questions/8396407/jquery-what-are-differences-between-document-ready-and-window-load ,, window.onload fires later (or at the same time in the worst/failing cases) — John John, Sep 02 '15 at 22:58
@johnG ok here's the thing.DOM and Window is two things. DOM is mostly the html contents, in this case the img,div and other tags. See the DOM ready mentioned in the answer. Window is the container :) — aimme, Sep 02 '15 at 23:01
@aimme so why you keep using smily face sign ":)" at the end of your answers! — John John, Sep 02 '15 at 23:07
@johnG express that i am happy and not bored on helping or talking others :) — aimme, Sep 02 '15 at 23:09
@aimme so now the problem i was facing is that when i am using window.load and i click on an image while the page is loading, then the the following code which is inside my script section "$('.thumb').touchTouch();" will not have any effect, and so the touchtouc.jquery.js script will not find any image to show inside the slider so this will cause the image to be displayed inside a separate window ???? — John John, Sep 02 '15 at 23:37
@johnG http://tutorialzine.com/2012/04/mobile-touch-gallery/ did you include the necessary files and here is a link that could be experimented on http://jsfiddle.net/dx8qdoph/ :) — aimme, Sep 02 '15 at 23:57
@aimme yes i did include all the files, if not then the slider will never be shown. but in my case if i wait till the page loads then the slider will work well,, so then indicates that i have all the necessary files ... is this correct? — John John, Sep 03 '15 at 00:10
ya you have necessary files. Just now i tested and find it as buggy.same happens everywhere. in the link jsfiddle.net/dx8qdoph i provided just now too. — aimme, Sep 03 '15 at 00:19
@johnG see the answer. improved with the codes that prevents user from clicking the images unless the page is fully loaded.which accomplishes what you want to achieve. i hope so :) — aimme, Sep 03 '15 at 01:10

score 1 · Accepted Answer · edited May 23 '17 at 12:29

I know this problem has been solved but for the people who visit here, in case anyone else runs into the same problem and find it here. As https://stackoverflow.com/users/575199/malk commented use

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

instead of

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

The code below prevents the user from clicking the document(images or anything else) until the page is fully loaded. Add $(document).click(false); to $(document).ready function and $(document).click(true) to $(window).load function.

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

but if i replace the window.load with document.ready it will solve the problem based on my testing .. — John John, Sep 03 '15 at 11:00

how to prevent clicking on an image until all the scripts is fully loaded

1 Answers1