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.
Related
I'm developing a web browser on Android and want to show the URL logo for the most visited sites like in Chrome (4 X 2). But the problem is that most favicons (eg: http://www.bbc.co.uk/favicon.ico) are of size either 16X16 or 32X32 and they don't look good when scaled up.
Is there a way I can download a high resolution icon/bitmap for an URL in a standard way? How about opening the home page and then extracting all the image links and then choose an image with the name logo in it? Would this method work for all the URLs? I want to know if there is a standard way to obtain a high resolution icon for a given URL or favicon is the only standard way to get the website logo?
You can code it yourself or use an existing solution.
Do-it-yourself algorithm
Look for Apple touch icon declarations in the code, such as <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Theses pictures range from 57x57 to 152x152. See Apple specs for full reference.
Even if you find no Apple touch icon declaration, try to load them anyway, based on Apple naming convention. For example, you might find something at /apple-touch-icon.png. Again, see Apple specs for reference.
Look for high definition PNG favicon in the code, such as <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">. In this example, you have a 196x196 picture.
Look for Windows 8 / IE10 and Windows 8.1 / IE11 tile pictures, such as <meta name="msapplication-TileImage" content="/mstile-144x144.png">. These pictures range from 70x70 to 310x310, or even more. See these Windows 8 and Windows 8.1 references.
Look for /browserconfig.xml, dedicated to Windows 8.1 / IE11. This is the other place where you can find tile pictures. See Microsoft specs.
Look for the og:image declaration such as <meta property="og:image" content="http://somesite.com/somepic.png"/>. This is how a web site indicates to FB/Pinterest/whatever the preferred picture to represent it. See Open Graph Protocol for reference.
At this point, you found no suitable logo... damned! You can still load all pictures in the page and make a guess to pick the best one.
Note: Steps 1, 2 and 3 are basically what Chrome does to get suitable icons for bookmark and home screen links. Coast by Opera even use the MS tile pictures to get the job done. Read this list to figure out which browser uses which picture (full disclosure: I am the author of this page).
APIs and open source projects
RealFaviconGenerator: You can get any web site favicon or related icon (such as the Touch Icon) with this favicon retrieval API. Full disclosure: I'm the author of this service.
BestIcon: Although less comprehensive, Besticon offers a good alternative, especially if you want to host the code yourself. There is also a hosted version you can use right away.
The Go code at https://github.com/mat/besticon tries to solve this problem.
For example
$ besticon http://github.com
http://github.com: https://github.com/apple-touch-icon-144.png
There is also an accompanying hosted version of the code, see for example http://icons.better-idea.org/icons?url=github.com.
(Disclaimer: I wrote it because I needed to solve the same problem a while ago.)
another option is getting favicons from any domain using a hidden google API
the favicon link pattern will be
https://www.google.com/s2/favicons?domain={domain}&sz={size}
for example
https://www.google.com/s2/favicons?domain=stackoverflow.com&sz=64
Logos are not going to be consistently named and very difficult to identify consistently. Consider putting the favicon on a colour tile of suitable dimensions. People will quickly associate the colour with the website. You could either extract a dominant colour from the website or favicon using something like colorthief, or make each one unique using a golden angle formula to choose a hue.
Here is a new and genuine solution which will always give you the best results-
Webchromeclient gives a callback of onReceivedTouchIconUrl method for all the websites just hold the url from here.
Next step is to convert this url to bitmap which can be done like this-
try {
URL url = new URL(touchiconUrl);
HttpURLConnection connection =
(HttpURLConnection)url.openConnection();
connection.setDoInput(true);
connection.connect();
InputStream input = connection.getInputStream();
Bitmap myBitmap = BitmapFactory.decodeStream(input);
return myBitmap;
} catch (IOException e) {
e.printStackTrace();
return null;
}
Next step is to send this bitmap for the shortcut.
Note: Remember to create bitmap on background thread like asynctask.
This HTML document requires a base url and the HTML/"View Page Source" of the web page and should output the values.
<!doctype html>
<input type=text placeholder=URL><br>
Place "View Page Source" of HTML homepage<br>
<textarea id=HTML placeholder="HTML content of webpage">
</textarea><br>
<input type=Submit>
<script>
function url(u,n){
try{
u = u.getAttribute(n);
}
catch(e){
return 'null';
}
if(u.slice(0,2) == "//"){
u = "http:"+u;
}
else if(u.slice(0,1) == "/"){
u = u.slice(0,1);
}
return '<img src="'+u+'">';
}
document.querySelector('input[type=Submit]').onclick = function(){
var output = '';
var HTML = document.getElementById('HTML').value;
var doc = document.implementation.createHTMLDocument("New Document");
doc.documentElement.innerHTML = HTML;
output = output + "apple-touch-icon<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon"]')).reverse()[0],'href')
// deprecated output = output + "apple-touch-icon-precomposed<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon-precomposed"]')).reverse()[0],'href')
output = output + "<br>image/png<br>" + url(doc.querySelectorAll('link[rel="icon"][type="image/png"]')[0],'href');
// <meta name="msapplication-TileImage" content="/mstile-144x144.png">
// deprecated output = output + "<br>msapplication-Ti:<br>"+ url(doc.querySelectorAll('link[name="msapplication-TileImage"]')[0],'content');
// <meta name="msapplication-config" content="/browserconfig.xml/ ">
//output = output + "<br>msapplication-con: "+ url(doc.querySelectorAll('meta[name="msapplication-config"]')[0],'content');
// <meta property="og:image" content="http://somesite.com/somepic.png"/>
output = output + "<br>og:image<br>" + url(doc.querySelectorAll('meta[property="og:image"]')[0],'content');
// <link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a">
output = output + "<br>image_source<br>" + url(doc.querySelectorAll('link[rel="image_src"]')[0],'href');
var URL = window.location.hash;
document.getElementById('output').innerHTML = output;
};</script>
<div id=output></div>
If you would like to automate the retrieval of the HTML you could use something like the following for PHP.
<? echo file_get_contents($_GET["url"]);
Usually favicon is small (like 16x16 or 32x32). If you need bigger dimensions, extract not favicon, but logo from homepage/header.
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.
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
Is it possible to refresh an iframe whenever the page changes? (The page within the iframe - not the page the iframe is on) I want to have an iframe show a page which is being developed, then whenever the page is changed/updated I want the iframe to refresh so it shows the newer version. Hope that makes sense. :P
Or would it be better to use something else instead of an iframe? Are iframes outdated now?
Only because I find this interesting... using jQuery:
<iframe id="someiFrame"></iframe>
<script type="text/javascript">
var page = '/some/page/on/this/server.html', lM;
function checkModified(){
$.get(page, function(a,a,x){
var mod = x.getResponseHeader('last-modified');
if(lM != mod){
lM = mod;
$('#someiFrame').attr('src', page);
}
}
}
setInterval(checkModified, 5000); // every 5 seconds
</script>
That will poll the page every 5 seconds (incredibly wasteful but if it's on a local dev machine, so what?) and reload the iframe only when the page is updated :)
Note that the iFrame MUST be on the same domain as the parent page.
Do you have access to the page that's being modified? If so, why not just add a refresh meta tag to the page's HEAD that will then update your iframe at whatever interval you set. The following tag produces a 5-minute refresh and it won't matter if your iframe is cross domain:
<meta http-equiv="refresh" content="300" />
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>