How can I remove default image icon - javascript

Images in which I have facing the cross sign problem which is appear in chrome and IE
the scenario which i want from external java script file(i want something like this).
first image having a cross icon when image tag not find the image from the source. mozilla will handle this very smartly but chrome and IE show a cross icon which i don't want..
i find out the solution which is not generic i have to pass a transparent image url when image not getting the image from specified url on every image tag..
something like this
<img src="i/ibm.png" onerror="this.src='i/1x1trns.png';">
but in my page there are more than 20 image and in a whole project more than 200 so in that case i want to handle this from a single external javascript file ...
so any one how know about this problem please tell me a solution...Thnx for co-operation

It's a bit dirty to have jQuery defined in the <head /> tag but you'd need to do this for $.ready, if you can write your own $.ready then it'd be just a bit of code in our <head />.
OR
You'd need to add jQuery before you have those images.
Try this code
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("img").on("error", function() {
$(this).attr("src", "i/1x1trns.png");
});
});
</script>
<img src="not-a-valid-image.png" alt="Logo not found" />
</body>
I have used this way in one of my projects.

var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++) {
(function(img_elem) {
var img = new Image();
img.src = img_elem.src;
img.onerror = function() {
img_elem.src = 'i/1x1trns.png';
};
})(imgs[i]);
}
http://jsfiddle.net/Ypa7N/

Related

Using JavaScript, how can I replace broken images with any other HTML data

I provide a service, that help users to find location of pictures. My problem is that the pictures are stored on an other internal site, and my users needs to be connected to it to see the pictures (some may not have access, as my service provide other info). The built-in replacement (alt attribute of IMG) doesn't provide enough flexibility to inform the user of the corrective actions
<div id=theDiv>
<img src='http\internalSite\'+this.name+'.jpg'
alt='Please connect to internalSite to see the picture '+this.name+'.jpg'>
</div>
I would like to improve the alt text, at least provide a link to 'internalSite' (or even better, load the connection page in an iFrame perhaps...). I found this to be impossible, so I would use onError attribute of IMG to replace what I have on the div
But in fact, the image is placed here by script, so I think this is a bit silly and clearly not optimized
how can my script detect that the picture is unavailable before, to decide what I do?
in pseudo code:
if (isURLavailble(path)){
loadPicture();
} else {
loadSomethingNiceToSayPicIsntAvailable() ;
}
is it possible to define a working function (and of course cross-browser) that does isURLavailble(path); ?
You could replace all broken images (or a subset of them) with login links:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<img src="doesnotexist">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
// See also https://stackoverflow.com/a/34726863/100754
$( document ).ready( function () {
"use strict";
$('login here').replaceAll($('img').filter( function () {
return !(this.complete && this.naturalHeight !== 0);
}));
});
</script>
</body>
</html>
See also this answer to Check if an image is loaded (no errors) in JavaScript.
Or, you can do something like this if you are setting images after the page has loaded:
var img = new Image();
img.onload = function () {
$(img).appendTo('.image-container');
};
img.onerror = function () {
$('login here').appendTo('.image-container');
};
img.src = 'doesnotexist';
You can check url using JQuery jqXHR calls:
$.get("urlToCheck.com").done(function () {
loadPicture();
}).fail(function () {
loadSomethingNiceToSayPicIsntAvailable() ;
});

How can jQuery fancy refresh an image div?

I have a few camera that uploading images trougth FTP connection.
I whould like to show the latest image with javascript, but I don't want to see white screens while the next image is loading.
I have this code:
<script type="text/javascript"
src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function() {
var $img = $('#image1');
setInterval(function() {
$.get('https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>&t='+ new Date().getTime(), function(data) {
var $loader = $(document.createElement('img'));
$loader.one('load', function() {
$img.attr('src', $loader.attr('src'));
});
$loader.attr('src', data);
if($loader.complete) {
$loader.trigger('load');
}
});
}, 5000);
});
</script>
<div id="load">
<img id="image1" src="https://alarmstudio.hu/<?php print($scriptfolder); ?>funkciok/kamerakep.php?ui=<?php print($_SESSION['userData']['user_id']); ?>&ci=<?php print($_REQUEST['kamera']); ?>" alt="kamerakep"/></div>
My problem is: The image is not showing at refresh. The refreshing response appears as such:
ÿØÿàJFIFÿÛC
%# , #&')*)-0-(0%()(ÿÛC
(((((((((((((((((((((((((((((((((((((((((((((((((((ÿÀÐ"ÿÄ
ÿĵ}!1AQa"q2¡#B±ÁRÑð$3br
%&'()*456789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚáâãäåæçèéêñòóôõö÷øùúÿÄ
ÿĵw!1AQaq"2B¡±Á #3RðbrÑ
$4á%ñ&'()*56789:CDEFGHIJSTUVWXYZcdefghijstuvwxyz¢£¤¥¦§¨©ª²³´µ¶·¸¹ºÂÃÄÅÆÇÈÉÊÒÓÔÕÖ×ØÙÚâãäåæçèéêòóôõö÷øùúÿÝÿÚ? uÝG?ññÿ/øQý»¨ÿÏÏþ8¿á]ÂBæßÅPYÃ&Ëk½ÞrmvÔr¼éGÅmBæãÅsÙÍ.ëkM¾Jmfèз8ÉÉõ®e^cÙÇçÿ·u/ùøÿÇü(ö¥ÿ?<¸¿á^¥ý¿©ÿªþØûOüLç·¿óßgÝÆ>ï+/\ÿç¸5S÷ú;¼¹¾î38Sò®ÝtªtcÓ×aû
I dont know what is this. It gives me code 200, but no new image. First time the image is showing...
I suspect your image is in binary format, which cannot be used as value in "src", what you should do is using it in base64.
Here an example: Embedding Base64 Images
Plan B is to update just the link, but as you said probably the browser won't show an image during the fetching process.
I have the answer. This jquery script needs to get the URL of the next image not the image source.

jQuery dynamically load image not working showing multipule images how to I replace the src= and not append to it

Okay so I have the little function below on my html page that receives data from another script using socket.io to update the url.
The problems is the image can change up to 10 times during the user is using my page.
If I am loading one image, it works, but multiple images don't work, as it appends the next picture to the src=.
And not replace it so I end up with multiple images in my div.
How do I changed it so it replace the src= and not append to it?
The src= is originally empty
Here's my jQuery script:
<script src="/js/jquery.js"></script>
<script>
function hellou(url){
var img = document.createElement("img");
img.src = url;
var src = document.getElementById("cpt_img");
src.appendChild(img);
}
</script>
Can someone show me an example to fix this?
Use an id attribute to detect if the image was previously appended or not
function hellou(url){
var img, src;
if (!document.getElementById('hellou-img')) {
var img = document.createElement("img");
img.src = url;
img.id ='hellou-img';
src = document.getElementById("cpt_img");
src.appendChild(img);
}
else {
document.getElementById('hellou-img').src = url;
}
}
When you call this function for the first time, the element whose id is hellou-img doesn't exist, so it is created and appended. From the second function call, since the element already exists, only its source will be changed.
use jquery>>
function hellou(url){
$("#cpt_img").attr("src",url);
}
can I have your HTML .. so that I can give you more specific answer
Try with
<script src="/js/jquery.js"></script>
<script>
function hellou(url){
$("img#cpt_img").attr("src", url);
}
</script>
A lil bit of jquery should help you do this eaisly
$("#image-selector").attr("src", "<url>");
Check this fiddle to understand this better : http://jsfiddle.net/U2MVD/
Html:
<img id="someImage" src="" />
Jquery
$("#someImage").attr("src", "smile1.png");
setTimeout(function(){
$("#someImage").attr("src", "smile2.png");
}, 3000);

Do not load images in javascript

I build a website and i want to ask the user when each time visit the site, if he want to display images or not. and if not, i want to do not load them and display the page without any img tag
i tried this, but this is not useful because the page will be loaded
function load_img () {
if (!confirm("Do you want to load the images on your site?")) {
var images = document.getElementsByTagName("img");
var l = images.length;
for (var i=0; i<l; i++) {
images[0].parentNode.removeChild(images[0]);
}
}
}
i need some code that don't load any img tag when the page load,
and not a code that hide or remove the images after the page is loaded and the images are displayed
can someone help me please with this javascript code
thank you
You can take a look at lazyload plugin for jQuery. What this plugin does is load the image when the image is on the visible area of the page.
Their idea is to put the original URL to the image in data-original attribute and in the src attribute put some small image e.g. 1x1 transparent gif like this:
<img data-original=“img/example.jpg” src=“img/grey.gif” />
and then you are able to load all the images whenever you want to just by replacing the the src.
this is a simple javascript code that you can try:
window.onload = function() {
if( confirm('Images?') ) {
var img = document.getElementsByTagName('img');
for(i in img) {
var original = img[i].getAttribute('data-original');
if( original.length ) {
img[i].setAttribute('src', original);
}
}
}
}
You could try jquery : $("img").remove();
It would be better to solve this problem from the server side!
Make start page with a link to a version of the page with images and one without the images. You can write a server side script (PHP?) to show or hide the images. Simple removing the images could break the page design. Also removing html image tags does not do the trick. What about background images, some in css files, ...
If you like to do this an on the client side with javascript you have to remove all images and add them manually with javascript.
Using jQuery you can do:
if (confirm('Hide images?'))
{
$('img').remove();
}
Without jQuery you have to use getElemtentsByTag and a loop.

jQuery, JavaScript, HTML: how to load images after everything else is loaded?

I have a very complex page with a lot of scripts and a rather long loading time. On top of that page I want to implement the jquery Nivo Slider (http://nivo.dev7studios.com/).
In the documentation it says I have to list all images for the slider inside of a div#slider
<div id="slider">
<img src="images/slide1.jpg" alt="" />
<img src="images/slide2.jpg" alt="" title="#htmlcaption" />
<img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
<img src="images/slide4.jpg" alt="" />
</div>
However I might have 10 images with a 1000x400px which is quite big. Those images would load when the page loads. Since they are in my header this might take quite a while.
I looking for a way to use any jquery Slider Plugin (like the nivo slider) but either dynamically load images or load all those images after everything else on my page has loaded.
Any idea how I could solve that?
Is there even a way to start a javascript process after everything else on the page has loaded? If there is a way I might have an solution for my problem (using the jquery ajax load() method) ... However I have no idea how to wait for everything else to load and then start the slider with all the images.
Here's what we did and its working great. We skipped setting src attribute of img and added img-location to a fake attribute lsrc. Then we load a dynamic image with lsrc value, and set the src of actual image only after its loaded.
Its not about faster loading, but its about showing the images only when its downloaded completely on your page, so that user do not have to see that annoying half-loaded images. A placeholder-image can be used while the actual images are being loaded.
Here's the code.
$(function(){
$.each(document.images, function(){
var this_image = this;
var src = $(this_image).attr('src') || '' ;
if(!src.length > 0){
//this_image.src = options.loading; // show loading
var lsrc = $(this_image).attr('lsrc') || '' ;
if(lsrc.length > 0){
var img = new Image();
img.src = lsrc;
$(img).load(function() {
this_image.src = this.src;
});
}
}
});
});
Edit: Trick is to set the src attribute only when that source is loaded in temporary img. $(img).load(fn); handles that.
In addition to Xhalent's answer, use the .append() function in jQuery to add them to the DOM:
Your HTML would just have:
<div id="slider">
</div>
And then your jquery would be:
jQuery(function(){
$("#slider").append('<img src="images/slide1.jpg" alt="" />');
});
check out jquery load() event, it waits for everything including graphics
$(window).load(function () {
// run code
});
on load you could then load the images using:
var image = new Image();
image.src = "/path/to/huge/file.jpg";
You can add a function onload to the image too
image.onload = function() {
...
}
I am using the below to power my slider and improve the page load performance.
for (var i = document.images.length - 1; i >= 0; i--) {
var this_image = document.images[i];
var src = $(this_image).attr('src') || '' ;
if(!src.length > 0){
var lsrc = $(this_image).attr('lsrc') || '' ;
if(lsrc.length > 0){
$(this_image).attr("src",lsrc);
}
}
}
the best way to use is b -lazy js.
bLazy is a lightweight lazy loading image script (less than 1.2KB minified and gzipped). It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data loaded if he/she doesn't browse the whole page.
For a full list of options, functions and examples go to the blog post: http://dinbror.dk/blog/blazy.
The following example is a lazy loading multi-serving responsive images example with a image callback :) If your device width is smaller than 420 px it'll serve a lighter and smaller version of the image. When an image has loaded it removes the loader in the callback.
In Html
<img class="b-lazy"
src="placeholder-image.jpg"
data-src="image.jpg"
data-src-small="small-image.jpg"
alt="Image description" />
In js
var bLazy = new Blazy({
breakpoints: [{
width: 420 // Max-width
, src: 'data-src-small'
}]
, success: function(element){
setTimeout(function(){
// We want to remove the loader gif now.
// First we find the parent container
// then we remove the "loading" class which holds the loader image
var parent = element.parentNode;
parent.className = parent.className.replace(/\bloading\b/,'');
}, 200);
}
});
Example
jquery has a syntax for executing javascript after document has loaded:
<script type="text/javascript">
jQuery(function(){
//your function implementation here...
});
</script>

Categories

Resources