I am developing a website (jQuery + Ajax) and I stumbled on a problem. When a page loads dynamically (for the first time, images aren't cached yet), it doesn't display the images. When I recall the ajax load function, suddenly my pictures are there.
$("#overlayInner").load(source+" #loader",function() {
$('#workImgs').nivoSlider();
});
I call nivoSlider on my dynamic page outside my loader div, so people who arrive directly on this page, can see the images as well.
<script type="text/javascript">
$(function(){
$('#workImgs').nivoSlider();
});
</script>
When you try to load the page without Ajax, the images load like they should.
Any ideas?
It is hard to make experiments in your website :) but you can try to add to each loading page (4d.html, dokerpoot.html and vuylsteke.html) the code for image preloading (in the start of the body tag). I used example images from vuylsteke.html:
<script type="text/javascript">
var images = [
'images/work/kapsalon2.jpg',
'images/work/kapsalon3.jpg',
'images/work/kapsalon4.jpg'
];
$(images).each(function() {
$('<img/>')[0].src = this;
});
</script>
Since the fragment load function after get parses the returned document to find the element with an ID of container, the idea is to let it first to load these images into memory, and then start to parse the document, and finally initialize Nivoslider. Possibly it will help.
I had this issue with content being loaded from a database. It turns out it was being caused by the Images not having a width or height set. This means that the plugin didn't know the size of the images and didn't show them but the browser calc'd these properties after the re-load so it showed the second time around.
Setting a width and height resolved this.
Related
I've a page containing dataTable.NET and two images which contain charts rendered by controller. If I render a complete page first time, everything is OK.
But when I handle row click event on dataTable and trying to generate another charts depending on row Id, the images are not repainted, but if I inspect network traffic in browser, there is HTTP result 200 and mouse over icon in Firefox's log entry shows an image with the new content.
Here is my code to reaload images. If I debug my controller and/or trying debug view using alert dialogs in ajax load callback, everythink seems work properly except the images are not repainted and page shows images loaded first time when complete page has been loaded.
Please, could anybody push me forward and point out what I'm missing and/or doing wrong way?
Thanks, pf
$('#cashnode-datastatus-table-id').on('click', 'tbody tr', function() {
$('#cashnode-datastatus-table-id tbody tr').removeClass('selected');
var row = $(this);
row.addClass('selected');
var data = CashNodeDataStatusTable.fnGetData(row);
var url = '/Data/DataStatus/NodeAmountStatusChart?Id=' + data.DT_RowId;
$("img#NodeAmountStatusChart").load(url);
url = '/Data/DataStatus/NodeCountStatusChart?Id=' + data.DT_RowId;
$("img#NodeCountStatusChart").load(url);
});
JQuery load function is used to load html content, which doesn't make much sense for img tags. To change images it is enough to set their source: $('#myImg').prop('src','new/url');.
Glad it helped :)
I insert some HTML code after a Ajax Call and in the Ajax-Callback I need the height of the added Div.
The problem is, in the HTML from the Ajax Call are elements like Images and other elements that have to be laoded first.
I did a simple example of the problem in jsfiddle: http://jsfiddle.net/qbwd663s/3/
As you can see when I add the code the console says 36, but if you click the div it says 242 (cause the image is loaded). Sometimes it works too if the image is allready in the cache, to test it reload the page with cleared cache.
What I need is something like $(document).ready() but only the elements that got called by ajax. Anyone have an idea how I could do that?
$("div *").one("load", function() {
alert($("div").height());
});
Fiddle: http://jsfiddle.net/aravi_vel/qbwd663s/6/
Use the load function as suggested by Harry
This function will handle the other kind of elements that you have listed (iframe etc.)
I'm looking for a way to load a website and then check after 1 min or so whether the content has changed, if not, repeat. This is because the website I'm trying to get content from contains javascript for loading the div I need. I thought of using some kind of iFrame, but I have no idea where to start and Google isn't helping me.
Edit
This is the code I'm running with atm and scrapUrl is a defined url so don't worry about it:
var iframe = document.body.appendChild(document.createElement('iframe'));
iframe.src = scrapUrl;
$(iframe).ready(function() {
$(iframe).load(function() {
alert('loaded');
alert($(iframe).contents().find('div#description').html());
});
});
It outputs "loaded" and after that "undefined"
So you're doing a lazy load of content in a div, and you want to know when that div has loaded? Depending how you're doing it, you'd be better to set a flag and react to the AJAX "load" event associated with that lazy load.
If you must do it the way you suggest, try this:
Create an interval (setInterval) that checks the load status, or the contents of the div
if false, do nothing. If true, clearInterval.
On a page, there is a button. When the button is clicked, a dropdown shows up. The dropdown contains an image. The problem is that the image is not fetched until the user clicks the button.
$("#my_button").click(function(){
$("#my_dropdown").html("<img src=\"http://mysite.com/image.jpg\" />");
});
I'd like to fetch the image when the page loads so it's ready to go when the user clicks the dropdown. How can I do this? I was thinking I could insert the image into the page with display:none set, so it'll get in the cache, or is there a way to load in when the document loads in jQuery?
This is for a Chrome extension, if it makes any difference. I suppose I could put the image in the extension (and that would be faster), but I'm still curious if it's possible to load the image using JS.
Thanks,
Kevin
Yes. Just define it as a new image in the ready() call of the page:
$(document).ready( function() {
var preload = new Image();
preload.src = "http://mysite.com/image.jpg";
});
Then when you use it, it will already be in the browser's cache. You can use the variable or just reference it the same way you already are.
You could preload each image...
$(document).ready(function() {
(new Image()).src = '/path/to/myImage.jpg';
});
I have a classic ASP page which is loading an ASP.net page through an iframe inside the ASP page. This is working great except for the fact that it takes a while to load the ASP.net page. The user is left here with unfavorable experience because all they say is an empty blank page until the page is finish loading.
What I would like to do is load an initial "loading" ASP.net page so at least the user is shown something and then when the ASP.net page is ready load the correct ASP.net page into the iframe.
Is this possible? I'm thinking perhaps with a bit of javascript but not 100% sure.
There is no "ASP page" once it hits the browser, there is only the resulting HTML.
You have a few problems here:
1) If you put something in the Iframe, it will be over-written as soon as the new page loads. So, you cannot use what's in the Iframe to display your message.
2) How to tell when the Iframe had loaded
You need to determine the location and size of the Iframe on your page. You need to position an element over it with your message. Modify the style of an absolutely-positioned element to cover the Iframe using JavaScript. Most people would use a framework, such as jQuery, to make it a lot easier.
You then need to detect when the Iframe has loaded and hide this element.
You can use this code to determine that the Iframe has loaded:
function checkIframeLoading() {
// Get a handle to the iframe element
var iframe = document.getElementById('testIframe');
// Check if loading is complete
if ( iframe.document.readyState == 'complete' ) {
// The loading is complete, call the function we want executed once the iframe is loaded
functionToCallAfterLoading();
return;
}
// If we are here, it is not loaded. Set things up so we check the status again in 100 milliseconds
window.setTimeout('checkIframeLoading();', 100);
}
You can use JQuery to modify an iframe after the page is loaded.
Another question on stackoverflow already contains a good example:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
var locations = ["http://webPage1.com", "http://webPage2.com"];
var len = array.length;
var iframe = $('#frame');
var i = 0;
setInterval(function () {
$iframe.attr('src', locations[++i % len]);
}, 30000);
});
</script>