I have seen that an animated loading gif loads when a an ajax request is being processed. I was wondering how this was done.
For example, there are a lot of images that are loaded from css file. Can I make a loading gif appear until these images are loaded.
Do you mean smth. like this:
http://api.jquery.com/ajaxStart/
or this: How to show loading spinner in jQuery?
You don't really mean Ajax. The images declared in css are loaded by the browser normally.
You need the load event, try this:
1 - Create an element with id yourDivIdWithLoadingElement in your html page which will be shown until all images has been loaded
<div id="yourDivIdWithLoadingElement:>Loading content...</div>
2 - Add this script in your header:
$(window).load(function () {
$('#yourDivIdWithLoadingElement').hide();
});
I dont know if you are using ASP.NET MVC?
If that is the case you can use an #Ajax.ActionLink and put your loading gif in an img tag specifying the id in your actionlink's AjaxOptions in the LoadingElementId.
It would look somehow like this
#Ajax.ActionLink("MyAction", "MyController", new AjaxOptions(){LoadingElementId = "MyGif"})
It will then hide the img gif until the actionlink is triggered. Sometimes you will need to hide it yourself using css, but as far as I remember that is not the case when you are just using an img tag
Related
I'm using Webpack to compile my Vue production bundle and it loads my images properly because they are defined used <img> tags in my component. I want to load an additional image and show it based on a condition. Since the image isn't set initially in an <img> tag Webpack isn't loading it using file-loader. When I call:
event.currentTarget.children[2].innerHTML = "<img src='../assets/imgs/heart.png' />"
This doesn't work because heart.png was never processed by file-loader, while my previous images were. Any ideas on how to force Webpack to process this image without defining it in HTML my component. My other images (that work) look like this : <img src="data:image/png;base64,iVBORw0KGgo...=="> I understand why my image isn't loading (it's defined in a string), buy any suggestions?
I am now loading all the images via my template when the image loads
//For example, I will just pass the image url into the tempate when the page renders
%div{class: "img_container <%= answer.image_scale %> <%=answer.show_image%>"}
<% if (media_con.standard_resolution) { %>
%a.fancy{href: "<%= media_con.standard_resolution %>"}
%img{src: "<%=media_con.standard_resolution%>"}
I realize that by doing this (esp if I am loading many images on the page), it causes inefficieny esp apparent on the mobile web.
How can I load images only when they are in view (scrolling), maybe just load a thumbnail image and load the actual image when the view with the image comes to view.
Any advice here is appreciated
There are a number of libraries to achieve this. I've personally used the Lazy Load Plugin for jQuery (demo). Instead of setting <img src> property in the template, you should set a property called data-original to the url of the image:
%img{data-original: "<%=media_con.standard_resolution%>", src="placeholder.png"}
And on the client side code (perhaps in Backbone.view.render) you initialize the library:
$("img[data-original]").lazyload();
I have an image preview plugin. It works perfectly with images that are already in the page.
like:
<a href='ImgHandler.ashx?Id=5' class='preview' title='Landscape'>
<img height='18' width='18' class='ImgInCell' src='ImgHandler.ashx?Id=5' alt='Landscape' /></a>
But When i load the same type of code through Ajax on a DIV layer the image hover preview is not working.
<a id="LinkPic" class="preview" title="Land Scape" href="ImgHandler.ashx?Id=5">
<img id="ImgPic" style="height:50px;width:50px;" src="ImgHandler.ashx?Id=5" alt="Land Scape">
</a>
Then i used firebug and copied the source after the load of AJAX; created a html page; then on loading it, I see the image hover on the AJAX Image is working Fine.
The Jquery code for The image preview is called by following.
$(document).ready(function () {
imagePreview();
});
I think it is not working due to the document.ready . How do i make the image preview work on AJAX data(Image)??
Calling the imagePreview(); after the AJAX call didnt help.
i found no other way than to insert the jquery code into the AJAX called document (partial view) with change in class like imgpreview2, and now its working fine.
First time I view the page with an animated .gif it plays fine on page load (lasts about 2 secs).
On refresh (F5), the .gif no longer plays and only the last frame of gif animation is shown.
Is there anything I can do do to make sure it plays everytime?
For the PHP the much better option then using date("Ymdgis"); is using time(), like this:
<img src="picturePath.gif?<?php echo time();?>" />
Strange behavior that's affects every browser..
I usually refresh it manually with this script (it uses jQuery)
<img id="gif_animata" src="picturePath.gif">
<script type="text/javascript">
var gifSource = $('#gif_animata').attr('src'); //get the source in the var
$('#gif_animata').attr('src', ""); //erase the source
$('#gif_animata').attr('src', gifSource+"?"+new Date().getTime()); //add the date to the source of the image... :-)
</script>
This will refresh the src of the image adding the current date, so the browser will re-load it, thinking that's a new image.
Otherwise in PHP way (I prefer this one):
<img src="picturePath.gif?<?php echo date("Ymdgis");?>" />
//for the browser it will seems that's a new picture!
<img src="picturePath.gif?2012092011207">
The workaround that works for me for this issue is to reload the GIF manually using Javascript
GIF implemented on CSS (background-images)
var element = document.getElementById(name);
element.style.backgroundImage = "none";
element.style.backgroundImage = "url(imagepath.gif?"+new Date().getTime()+")";
GIF implemented on HTML (img tag)
var element = document.getElementById(name);
element.src = "";
element.src = "imagepath.gif?"+new Date().getTime();
Thanks to #sekmo
This works, only requires one line below it and I suggest not filling the <img> src attribute at first so the page doesn't try to load any unnecessary resources.
<img id="gif" src=""/>
<script>document.getElementById('gif').src="path_to_picture.gif?a="+Math.random()</script>
It could be that your browser is just showing the cached version. Try holding shift and refreshing, and see if it works.
Normally a webpage load images is like scrolling down. I don't want the visitor's of my site to see it. I am looking for a script that will load my webpage and then it will show completely. I have already put a fadeIn effect but the images loading is scrolling and also my background image.
Questions:
Is there a script for that?
What is the best script to use? PHP or JavaScript?
this is one method, http://developer.yahoo.com/yui/examples/container/panel-loading.html
basically you can wrap the content in a hidden div, then unhide it in the body's onload event.
You could overlay your page with a "please wait..." div, and fade that out when the page is loaded. You could use JQuery's ready event to hide the div.
The downside of this is that users with JavaScript turned off would never see the page, but only the "please wait.." message.
To make it work for users with JavaScript turned as well, you would have to make the "please wait..." div visible using Javascript at a very early stage of the document's loading, which is very tricky to achieve. It might work if you put a <script> tag after the "please wait" div but before the actual page's content.
or you can add on page header small copy's of this images.. 1x1 px and fade it or hide or z-index -100/ browser will download this full-size images
Use this code:
<body onload="document.getElementById('loading').style.display = 'none';document.getElementById('content').style.display = 'block';">
<div id="loading">Some loading text or icon goes here...</div>
<div id="content" style="display:none;">Main content goes here...</div>