Windows.load Function Not working in IE Browser - javascript

$(window).load(function () { //Your Function
});
I use This Load Function For Apply Some Design After Complete some Web service Process.
It's Work Fine in All Browser But IN IE Not Worked....
Load Function Apply Before Web service Completed
Any Help
my Code Set Up
<img src="img/Loading.png" id="image" alt="loading" />
Show Image Code
$(document).ready(function () {
$('#image').show();
});
//Web service process after Complete
Hide image code
$(window).load(function () {
$('#image').hide();
});

try this for IE:
window.onload = new function() { //Your Function };

Related

How to run code after an image has been loaded using JQuery

I'm trying to load an element only after the img element has been loaded, but I've tried everything I can think of and nothing is working. Right now I'm trying to see where the code stops working and I found that the alert I set up isn't running after the line I need the code to execute from.
$img = $('#picture');
function bubbleOnLoad() {
$(document).ready(function() {
$img.load(function(){
alert('document loaded')
$('#left-bubble').show();
})
})
The $img is defined within a function. The alert works at the document.ready line but not after the $img.load. I have tried to add eventlisteners, jquery .on, .load, and a bunch of others. I'm also calling the function to run within my init function. Can someone explain to me why nothing is working?
function choosePic()
$('.speechbubble').hide();
$('#picture').remove();
var randomNum = Math.floor(Math.random() * samplePics.length);
var img = new Image();
img.onload = function() {
$('.playing-field').prepend(img);
handleImageLoad();
}
img.src = samplePics[randomNum];
img.id = "picture";
}
var samplePics =
"assets/images/barack-obama.jpg",
"assets/images/donald-trump_3.jpg",
"assets/images/dt-2.jpg",
"assets/images/bill-clinton.jpg",
"assets/images/Rose-Byrne.jpg",
"assets/images/pic.jpeg",
"assets/images/priest.jpg",
"assets/images/tb.jpg",
"assets/images/test.jpg",
"assets/images/amy-poehler.jpg",
"assets/images/stephen-colbert.jpg",
"assets/images/aziz-ansari.jpg"
];
You had some syntax errors in your code which I corrected and came up with this:
function bubbleOnLoad() {
$img = $('#picture');
$img.load(function () {
alert('document loaded');
$('#left-bubble').show();
});
}
$(document).ready(function () {
bubbleOnLoad();
});
Here is the JSFiddle demo
In you code you are not even telling the browser it's supposed to run a code after image load. you should do something like this:
$(function(){
// DOM Content is ready, let's interact with it.
$('#picture').attr('src', 'image.jpg').load(function() {
// run code
alert('Image Loaded');
});
});
Also according to docs a common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:
It doesn't work consistently nor reliably cross-browser
It doesn't fire correctly in WebKit if the image src is set to the same src as before
It doesn't correctly bubble up the DOM tree
Can cease to fire for images that already live in the browser's cache
Try this jQuery plugin waitForImages
https://github.com/alexanderdickson/waitForImages
//Javascript/jQuery
$(document).ready(function(){
var counter = 0,totalImages= $('#preloader').find('img').length;
$('#preloader').find('img').waitForImages(function() {
//fires for all images waiting for the last one.
if (++counter == totalImages) {
$('#preloader').hide();
yourCallBack();
}
});
});
/*css*/
#preloader{
position:absolute;
top:-100px;/*dont put in DOM*/
}
#preloader > img{
width:1px;
height:1px;
}
<!--HTML [add the plugin after jQuery] -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.waitforimages/1.5.0/jquery.waitforimages.min.js" ></script>
<!--HTML [after body start] -->
<div id=preloader>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.png" />
<img src="4.gif" />
<img src="5.jpg" />
</div>
You can only access the HTML element after it was created in DOM.
Also you need to check if the image was loaded before showing.
Thus your code need to look something as below:
$(document).ready(function() {
bubbleOnLoad();
});
function bubbleOnLoad() {
var newSrc = "https://lh5.googleusercontent.com/-lFNPp0DRjgY/AAAAAAAAAAI/AAAAAAAAAD8/Fi3WUhXGOY0/photo.jpg?sz=328";
$img = $('#picture');
$img.attr('src', newSrc) //Set the source so it begins fetching
.each(function() {
if(this.complete) {
alert('image loaded')
$('#left-bubble').show();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left-bubble" style="display:none">
<img id="picture"/>
</div>

Load javascript after 5 seconds after page has loaded?

I have tried the following:
<body id="myBody" onload = "setTimeout('a()', 5000)" / >
Is this the correct method? The reason why I want to do this is because I have my entire website animating in (such as fade ins) on page load. Having my javascript only makes the animation unsmooth.
Any feedback appreciated.
This code will work. Just set your time in milliseconds and write your JS code on loadAfterTime function:
<script>
window.onload = function(){
setTimeout(loadAfterTime, 5000)
};
function loadAfterTime() {
// code you need to execute goes here.
}
</script>
window.addEventListener("load", function () {
animation();
setTimeout(otherOperation, 5000);
}, false);
function animation() {}
function otherOperation() {}
maybe you can use code like this
<body id="myBody" onload = "setTimeout(a, 5000)">
Try this
if you are using jQuery your animation has a callback that you can use to delay the firing of all other javascript events like so:
$( window ).on( 'load', function () {
$( '.someElements' ).animate({
// properties to animate
}, 300, function () {
initScripts();
});
});
function initScripts () {
// call all other functions here
}
The Browser is always load all of your script if any when you open the web page. So It depend on when you call your javascript functions.
Try this:
document.ready(function(){
// your code
});
or
$(function(){
// your code
});
both of them make sure that all of element on your page have been loaded.

How to wait until iframe refresh is done before executing function?

I am refreshing an iframe on my page when someone clicks on an image with this code:
$("img").click(function() {
$('#space iframe').attr('src', function(i, val){ return val; });
openBox();
});
But I only want to execute openBox() function after the iframe is done refreshing.
How can I achieve something like that?
Using jQuery:
$('#frameId').on('load', function() {
//code to execute after frame loaded
});
Using vanilla JavaScript:
document.getElementById('frameId').addEventListener('load', function() {
//code to execute after frame loaded
});
While this isn't exactly your problem, here is how you listen for an load event on an iFrame.
HTML
<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>
JS
$("#loadFrame").click(function () {
$("#frame").attr("src", "http://www.google.com");
$("#frame").on("load", function () {
alert("ad");
});
});
Fiddle: http://jsfiddle.net/7RL35/4/

Trouble calling JavaScript function on page load

I have a javascript function that i have named refreshProjects(), what it does is filter a dropdownlist depending on what was selected in a previous dropdownlist. But i need to also filter my list direcktly after the page has finishd loading.
I have tried using the code window.onload = refreshProjects(id) with no sucsses, but onload workes when i use window.onload = alert('This page has finished loading!'), so i know that part off the script works. So how do i call a javascript function on load, i thought that it would be simple but evrything i tried have failed.
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
window.onload = refreshProjects(id); <-- Problem
$("#ddCustomers").change(function () {
refreshProjects($(this).val());
});
function refreshProjects(id) {
var projects = $("#ddProjects");
$.get('#Url.Action("FilterProjects","TimeEntry")', { customerId: id },
function (result) {
// clear the dropdown
projects.empty();
//Add a deafult "null" value
$("#ddProjects").get(0).options[0] = new Option("[ - No project - ]", "-1");
// rebuild the dropdown
$.each(result, function (i, e) {
projects.append($('<option/>').text(e.Text).val(e.Value));
});
});
}</script>
}
This is for MVC 4.5.
Try changing window.onload = refreshProjects(id); to:
window.onload = function() { refreshProjects($("#ddCustomers").val()); };
Onload expects a callback function. You were directly executing refreshProjects() and setting the return value as the onload.
But since you seem to be using jQUery, you could do the following:
$(function() {
refreshProjects($("#ddCustomers").val());
});
This will execute refreshProjects when the document is ready (which actually is before window load).
You can also try to use the following:
$(document).ready(function () {
refreshProjects(id);
});
This should work aswell if you are using jQuery.

The javascript code from server side is not working in asp.net?

i am developing an Asp.net application when i call javascript function from codebehind i found that for example:
click event not fired
i have a javascript function that fill the dropdown list with items using ajax but when page loaded i found dropdown list empty
i am using RegisterClientScriptBlock to execute the javascript code
so is there any solution for these problems?
code snippet:
code behind:
ClientScript.RegisterClientScriptBlock(this.GetType(), "ClientBlock", javacode.ToString());
this what in javacode variable :
<script type="text/javascript">
<!--
function ExecuteScript()
{
$("#divGender input").click();
GetDMspecifyList(5);
$("cp1_drpDMSpecify").removeAttr('disabled');
$("cp1_drpDMSpecify option:selected").val(4);
$("#divFamily input").click();
}
</script>
// -->
this the function used to fill dropdown list but it is not working
function GetDMspecifyList(DMID) {
$("#DMLoader").show();
$.getJSON('FillDropDownLists.aspx?DMTypeID=' + DMID, function (types) {
$.each(types, function () {
$("#cp1_drpDMSpecify").append($("<option></option>").val(this['DMTypeCode']).html(this['DMTypeName']));
});
$("#DMLoader").hide();
$("#DMSpecify_span").show();
$("#cp1_hdDMType").val($("#cp1_drpDMSpecify").val());
$("#cp1_drpDMSpecify").removeAttr('disabled');
});
}
First of all the function "ExecuteScript()" is lacking it's closing curly brace "}".
Also, is the ExecuteScript() function called anywhere?
EDIT
You could try something similar to the code below :
<script type="text/javascript">
<!--
function ExecuteScript() {
$("#divGender input").click();
GetDMspecifyList(5, function() {
$("cp1_drpDMSpecify").removeAttr('disabled');
$("cp1_drpDMSpecify option:selected").val(4);
$("#divFamily input").click();
});
}
function GetDMspecifyList(DMID, callback) {
$("#DMLoader").show();
$.getJSON('FillDropDownLists.aspx?DMTypeID=' + DMID, function (types) {
$.each(types, function () {
$("#cp1_drpDMSpecify").append($("<option></option>").val(this['DMTypeCode']).html(this['DMTypeName']));
});
$("#DMLoader").hide();
$("#DMSpecify_span").show();
$("#cp1_hdDMType").val($("#cp1_drpDMSpecify").val());
$("#cp1_drpDMSpecify").removeAttr('disabled');
callback();
});
}
$(function() { ExecuteScript(); });
// -->
</script>

Categories