How to load loader image before the pdf file is shown?

StackOverflow https://stackoverflow.com/questions/19318660

質問

I am having <a> tag. href of that tag is pdf file. I want to load that pdf file after 10 seconds till then i want to show loader. I did google and I got one jQuery BlockUI plugin. It works when i am not passing anything in href i.e. #.

HTML

<head>
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.10.2.min.js"></script>
   <script src="jquery.blockUI.js"></script>
</head>
<body>
   <a class="question" href="Application_Form.pdf" id="demo2">Testing</a>
</body>

JavaScript

<script type="text/javascript">
$(document).ready(function() { 
    $('#demo2').click(function() { 
        $.blockUI({ css: { 
            border: 'none', 
            padding: '15px', 
            backgroundColor: '#000', 
            '-webkit-border-radius': '10px', 
            '-moz-border-radius': '10px', 
            opacity: .5, 
            color: '#fff' 
        } }); 

        setTimeout($.unblockUI, 10000); 
    }); 
});
</script>

How to do this.

I did Google very much but I am not getting how to do it.

Please can any one help me out to solve this issue. Thanks in advance..

役に立ちましたか？

解決

Friend you only missed to wrap your jQuery magic inside $(document).ready(function(){ }); You can try this in your jQuery code:

$(document).ready(function(){
$('#demo2').click(function() { 
    $.blockUI({ css: { 
        border: 'none', 
        padding: '15px', 
        backgroundColor: '#000', 
        '-webkit-border-radius': '10px', 
        '-moz-border-radius': '10px', 
        opacity: .5, 
        color: '#fff' 
    } }); 

    setTimeout(function() { 
        $.unblockUI({ 
            onUnblock: function(){ alert('hi'); // Show your pdf file here
            } 
        }); 
    }, 2000); 
});
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top