I would like to set an image as nothing. By doing src="" many people say it can cause problems to browsers:
http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/
so I am not sure if below can face to the same problem as setting src to empty:
<img id="myImage">
since there's no src attribute on this case.
So If I want to initially set an image to nothing, what's the best I can do?
Best solution
Initialise the image as follows: src="//:0" like here: <img id="myImage" src="//:0">
Edit: as per the comment of Alex below, using //:0 apparently can trigger the onError event of the img. So beware of this.
Edit 2: From comment by Drkawashima: As of Chrome 61 src="//:0" no longer seems to trigger the onError event.
Other solution
Alternatively, you can use a very small image until you actually fill the src tag: like this image. With this 'very small image', you would then initialise the tag like so:
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D" width="0" height="0" alt="" />
source
Remove element from DOM
Alternatively, if you simply don't want the element to appear in the DOM, just use some JavaScript:
var myObject = document.getElementById('myObject');
myObject.parentNode.removeChild(myObject);
(as per this answer, using JavaScript's .remove() function is not recommended, due to poor browser support in DOM 4)
Or just use some jQuery:
$("#myObject").remove();
Using a 1px transparent encoded image is an accepted solution (recommended by CSSTricks)
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
PS: Don't be confused later when DevTools shows these as network requests of zero bytes, that's just how DevTools works, all imgs are listed as network requests.
DS: alt="" is included because otherwise, screenreaders will read the src out loud
Just use a hash symbol #. It's valid value for src attribute. :)
https://stackoverflow.com/a/28077004/3841049
Use this script to set a default image if src is empty or blank
$(document).ready(function () {
$('img').each(function () {
if($(this).attr('src')=="") {
$(this).attr('src', 'Images/download.jpg');
}
});
});
Related
I added AMP-Pinterest to my AMPed page. I'd like to set the propery
data-pin-hover="true" to get the PinIt button on the image. For some reason it doesn't work.
Here is what I have so far:
That's in <head>:
<script async custom-element="amp-pinterest" src="https://cdn.ampproject.org/v0/amp-pinterest-0.1.js"></script>
(and of course other AMP stuff)
That's in <body>:
<amp-pinterest height=28 width=56
data-do="buttonPin"
data-url="URL"
data-media="IMG_URL"
data-pin-hover="true"
data-description="DESC">
</amp-pinterest>
I also added data-pin-nopin="false" and data-pin-no-hover="false" to my amp-img's declaration (just in case, if it's not by default set to false. More info here: https://www.ampproject.org/docs/reference/components/amp-pinterest):
<amp-img alt="NAME" src="IMG_URL" width="600"
height="400" layout="responsive" data-pin-nopin="false"
data-pin-no-hover="false" />
But it still doesn't work (the PinIt button shows up above/below amp-img).
Question:
Now I'm wondering if I did something wrong or it's simply not supported using AMP-Pinterest to hover an image? (I can't find any example).
Unfortunately, this option doesn't to be available for amp-pinterest at the moment (going through the docs and other examples). However, if you don't prefer for the Pin It button to not appear above or below, you can instead have it embedded in the image, as seen in the amp-pinterest samples:
Embed pin widget
To embed the pin widget, set data-do to embedPing. The data-url attribute must contain the fully-qualified URL of the Pinterest resource.
I am working on a personal site, and the site uses an <iframe> to display most of its contents. You navigate the site by changing the target of the <iframe> to a specific .html.
Here's an example of how the navigation works:
<ul>
<li><a>onclick="document.getElementById('iframe1').src='home.html'>Home</a></li>
<li><a>onclick="document.getElementById('iframe1').src='prjcts.html'>Projects</a></li>
</ul>
<iframe src="home.html" id="iframe1"></iframe>
The problem that I've encountered is that since most things are is inside of the <iframe> that I can't link directly to any specific content.
If I wanted to show someone the Projects page, I can only link "www.example.com/" and tell them to navigate there themselves, and not simply link "www.example.com/projects".
My theory is that you can do it with something like:
"www.example.com#projects" using ID's or something, but since I'm pretty new to HTML5, I might be completely wrong. I have no idea how to make it work, and I can't seem to find anyone explaining it.
Is there any way to use the URL to specify an <iframe> target, and if so, how?
You would want to check the url and then set the src of your iframe using the url:
This is just an example of how you could do it, you should use maybe an array of URLs. There are a bunch of ways to accomplish this.
HTML:
<div id="wrapper">
<iframe id="myIframe" src="http://example.com/"></iframe>
</div>
JavaScript (using jQuery here):
$(document).ready(function () {
var myPath = window.location.pathname; // returns something like /projects.html
if (myPath == "/projects.html") {
$('#myIframe').src = "http://www.example.com/projects.html"; // sets the src of your iframe
}
});
Refer to this post's answer: dynamically set iframe src
i have a web app written in aspx.
I have a img control.
If a required image is not available then the alt text message displays.
Is there a way to set an 'alt image' instead? This img control relies on updates so after a default period of 10 seconds if no image is acquired then I would like to set a default image instead. It would be handy if there was a property like 'alt image'.
I guess I could use a timer to check but would be interested in other approaches.
Thanks
The onerror attribute can execute js and set a new image like shown below
<img src="/images/200.png" onerror="this.src='/images/404.png'" >
We have alternate text, alt attribute, for an img tag in HTML, which will show up when the image doesn't come up. I tried using the tag with iframe too.
<iframe src="www.abc.com" alt="Web site is not avaialable">
But the alternate text doesn't come up when src="" is given. Just wanted to know if I can achieve alternate text in any other way, if the src is not given ?
While not the "cleanest" solution, another option is to use position and z-index in your CSS to "hide" an empty image under the iframe. This will give you all of the meta-data advantages of true alt text without needing to go into any complex scripting.
It's also good if you just want it as placeholder to display until the iframe is done loading.
Since my first attempt misunderstood your question, let's try this instead:
<script>
$(function () {
$("iframe").not(":has([src])").each(function () {
var ifrm = this;
ifrm = (ifrm.contentWindow) ? ifrm.contentWindow : (ifrm.contentDocument.document) ? ifrm.contentDocument.document : ifrm.contentDocument;
ifrm.document.open();
ifrm.document.write($(this).attr("alt"));
ifrm.document.close();
});
});
</script>
This will read the "alt" tag value for any iframe with either no src attribute or a src attribute with a blank value, and write the alt text into the body of that iframe.
Assist from Write elements into a child iframe using Javascript or jQuery
The <iframe> element doesn't support an alt attribute, but it does support longdesc. Still, the HTML specification does not dictate how browsers handle long description (or alternate) text. The only way to guarantee any specific behavior is to use JavaScript. Here is an untested example using jQuery:
// Not tested
$('iframe').each(function() {
if ($(this).attr('href') == '') {
// Do something with $(this).attr('longdesc')
}
});
I don't know of a way to trap for 404 responses from an iframe in any kind of straightforward way, however you could trap it with some jQuery:
<iframe id="myFrame"></iframe>
<script>
$(function () {
$.ajax({
url: "http://www.abc.com",
success: function (data) {
$("#myFrame").html(data);
},
error: function () {
$("#myFrame").html("Web site is not avaialable");
}
});
</script>
What about using an image with your alt info on it as the background of the div containing the iframe in question?
Or, better yet:
You should think about using an image with your alt info on it as the background of the div containing the iframe in question. This, combined with some positioning, you are there...
Come to think of it, it's what I do to display a backup ad in the case of, and in place of, where the one in the iframe did not load...
Is there a way to control the load order of images on a web page? I was thinking of trying to simulate a preloader by first loading a light-weight 'LOADING' graphic. Any ideas?
Thanks
Use Javascript, and populate the image src properties later. The # tells the browser to link to a URL on the page, so no request will be sent to the server. (If the src property was empty, a request is still made to the server - not great.)
Assemble an array of image addresses, and recurse through it, loading your images and calling a recursive function when the onload or onerror method for each image returns a value.
HTML:
<img src='#' id='img0' alt='[]' />
<img src='#' id='img1' alt='[]' />
<img src='#' id='img2' alt='[]' />
JS:
var imgAddresses = ['img1.png','img2.jpg','img3.gif'];
function loadImage(counter) {
// Break out if no more images
if (counter==imgAddresses.length) { return; }
// Grab an image obj
var I = document.getElementById("img"+counter);
// Monitor load or error events, moving on to next image in either case
I.onload = I.onerror = function() { loadImage(counter+1); }
//Change source (then wait for event)
I.src = imgAddresses[counter];
}
loadImage(0);
You could even play around with a document.getElementsByTagName("IMG").
By the way, if you need a loading image, this is a good place to start.
EDIT
To avoid multiple requests to the server, you could use almost the same method, only don't insert image elements until you're ready to load them. Have a <span> container waiting for each image. Then, loop through, get the span object, and dynamically insert the image tag:
var img = document.createElement("IMG");
document.getElementById('mySpan').appendChild(img);
img.src = ...
Then the image request is made only once, when the element is created.
I think this article https://varvy.com/pagespeed/defer-images.html gives a very good and simple solution. Notice the part which explains how to create "empty" <img> tags with:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
to avoid <img src="">
To display a loading image, just put it in the HTML and change it later at the appropriate moment/event.
Just include the 'loading' image before any other images. usually they are included at the very top of the page and then when the page loading completes, they are hidden by a JS.
Here's a small jQuery plugin that does this for you: https://github.com/AlexandreKilian/imageorder