Same title. I'm not sure if this is a browser bug or behavior, see below example:
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var srcs = [
'https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1',
'https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG',
'https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG',
//
// 'data:image/png;base64,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',
// 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gOTAK/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A+rrt20+0mnml8qCJC7ux4VQMkmvz3+Iv7Zfie68ZzPpsrrokNwwhgibYzx543H19+3vX6T694cTVdGvrJ1ylxC8RHsVIr4E+FHgH4beIPDOnw63YR2+s7nZ5N7GSXJLYx6gdvQV+hYnMY4aj7W19eh+QcO5W8wrypytoup13wr/bf8Ma5Da6X4ggudN1M/L50nzwv9W4IOPbHvX0pYzW+t6fb31owkt7iMSRyDupGRXxb8Xfht4Tg+H0mpeCLt9QitL9ZDDKAWjWT92wX5Q3LBDg9lyK+rv2cb/S9Y+FejW1hqVrqFxZwKl1Fbyb2tpGG7y35yGGcc+lXgM0jjIOVrNP5k8RZEsslFw2fzX3n0l9jUjpXwV+0Nc2PwF+MM81v4bS6jvp01O3nQlSivkSKMA8eZv7cAgcZr7mXW4yPviviL9tzQbfXPF+ma0/iK7uJbSNo1tIXwtovy78L9xgcZOQSGPJxgL8RnmKhgcI6mI2bS83+Kv8vU93hiv9Wx6lHVNHAeOPjXcQeD97aZY6fMZ0+wwKAEuGbBBYccDDEk44UnAr0T/gn7qFzqU/iuC306ZdHifc1+7ptknJHRVJHKjPykgc5PIrJ+FXwr0DxPr0Oo3mj6r4znlgWMPrEUJso3H8Q/u9Tk4bHGOnP2V4O8CaH4St0i0jR7DSnEWx106AQx4zuICjjGSeTz61+NYbxJwOV4yOGdOXLJ+9LTRar4d/PXofc8QUJ5tTfJpZaJ+p/9k=',
// 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFVUlEQVRYw8WXa2yTVRjHf+/etm/b9bJbt25zF8pgdzYdBUaQASIYJYjEaFSiRgPEAEYSEo1+0vjdkGhCTIjIB2+JkMAEZH7gNsIcsCsblwJzF7aua7e263p5u75+GGIWxujojOfr83/O+Z1znss5ws7P31P4H4dqLuJgIEj35Rv03OjF6/aBomBIMWDNz6K0ppiM7PT/BkCJKVw+00JbYweT0clpNo9zFI9zlK7m6xRV2nh200o0Ws38AUxOTnLuWCM3Wx2PnczRcQf3kIcX396IwZScOICiKJw/fnHa4oIAJr0WbyBEviWFN9bWsMSWwz23l6ON7Vzs6qH+0Ele2bEZKY6TmBVguN/FjZZbqEWRbetrWFVuozgvE4vZgNsXwJysQyUm3Vfnsbm2gms9g2z/6meunm2lduOyxABuX7uLIMC3e19jZdmCabb0RxxxeWE2H22t44sf/+CZ1VVIOmlWgKTZjO5BN0sX5T20+OPG8pIC5IjMXzf7HqudFcDr8WHSa+ecWtnpZtSiOJWqiQDEYgreQGjOABqVSHmBlWAgmFgMqDVq0s1Td+2bCHG23cHQqJ+cNDMv2EsQk6b4224P8NufXQiCwLrqRSwvKWBtdRHHb/UlBqA3aKmrXIg3EORA/UVCEZnhsXHOBBwkazWsqSpCURS+PnaBHqcHa6qRysJsFEVhy8pKTvc5EwMwpZkozc/CnKzDnKzlu9+b+KdxSGoVa6qKAFiyIJtQROZmv4svfziNvTgfa5qJ3VtW0xqNPjnAwowUMu5fgb04n/27tqKXNBRkppKbYb5fmAT2bFk9o39LYweq5aVMPnEMqEQ0qilJzaK8OQfj6+uX8os/8ORZsKGuGqNeeuJWK+ikxGJgUFEQBGFGW2fPIIcbmqkozKbPNcZnbz7/kGZEjiZWB0bkKI5geEabfyJMZoqR0fEgi5+yzKgRhXlox2OPiOLaskJqywpn9W0fDyYO0OQLUG3Qo7lfdNy+AAdPNZGZYiAUkQlFooRkGYvJwKYV5WSlGgEIx2IMReTEAWRF4fpEiCUGPQCpRj1rq4vQqERy0s1IahWSWsXdITcpBt0DP1ckGlegJsUj6g4EcY76pxwEAfvifKpsuVzovMP+o+cAKMnLQlL/u59hWY4vU+J9FQebuinLTufllZUkCbNHV3evk16dhmuh8PycAEBeaQGfHKznw2+OEAzPvrtUow6jJr42HvezPJyaiyUrk4arN9j46QFWVdhISdYyHgwzPDaOWiXS4hhg50u1vPWcnU6vFvDOD8C9u4MoPjfvbH+fHw4d5l7/AL+eb3tIZ9RJrKqw0RKQGImq8Q9PYLDoHlnM4roCOSJzqaGZrvZOjCYT23d9wOZXt2I0GafpcjPMfP/xNjyGHG6F1ACc+qmBzqbu+E9AURQ8Tg8913tx9rsI+AL4x8aRwzKjqjEi4TAaSaJmmZ2KqiV0tXfg7e8hVy/w7qY6rsVSGQuJD+bT6XVcPHmJ4QEXZUuLycrLJClp+p5VTQ3NuIdGCYfC+Dx+QhMzP8Gi0SjtrW0sXT711JYkieLyMq74fGRZM2h0+AjqFZJMJiRpqgllWq0M9PXjaL+No/022mQttrJCip9ehCUnA0EQEIC4P6dGk4nd+/YiSRIdrW2crj+B3+9HJYqULijAF5jA5fVRt34d9toVtDRf4fiRozPOlW5No8xeMjcAgELbArQ6HW7XCO6REWKxGJVFNrzjAXqHnIiiSF5BPhkWC6npaTScODV/v2OAnjt3Ka0oZ/e+vbiGhzl74iQSChtW2DlUf4ode3aRlW0lFosxOHDvsfP9DZRm+jqPr69OAAAAAElFTkSuQmCC',
// 'data:image/jpeg;base64,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',
];
var $x = $('#x');
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$x.attr('src', srcs[i]);
}, 100);
});
</script>
</head>
<body>
<img id="x" width="50" height="50">
</body>
</html>
Every few random seconds, the images are requested again, although fetched from disk cache, but request is happening. If you resize window, the requests may happen even more frequently.
Check JS Fiddle
I tried using base64 images instead of URLs, still same thing. This is an issue because the visible image may glitch/flicker when request occurs.
EDIT
How to prevent chrome from requesting the same image again?
This is the right behavior as "Memory Cache" stores and loads resources to and from Memory (RAM). So this is much faster but it is non-persistent. Content is available until you close the Browser.
"Disk Cache" is persistent. Cached resources are stored and loaded to and from disk.
For more info on how Chrome caches works (memory and disk), please refer to this link.
Placing multiple imgs, hide all and show only 1 at a time, prevents Chrome from requesting same images. With this approach, each image is requested only once.
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var i = -1;
setInterval(function() {
++i;
if(i >= 4) {
i = 0;
}
$('.img').hide();
$('#img' + i).show();
}, 100);
});
</script>
</head>
<body>
<!-- using multiple images with display: none, src is fixed in HTML (not changed by JS) -->
<img id="img0" class="img" width="50" height="50" style="display: none;" src="https://i.stack.imgur.com/sIH1O.jpg?s=48&g=1">
<img id="img1" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/9aa2aa68144b2781ac025a29c83bbdd4?s=32&d=identicon&r=PG">
<img id="img2" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/c0377fc1b08293d3362611978913a32b?s=32&d=identicon&r=PG">
<img id="img3" class="img" width="50" height="50" style="display: none;" src="https://www.gravatar.com/avatar/07f36acea2b942f61102221f92f62f6e?s=32&d=identicon&r=PG">
</body>
</html>
JS Fiddle
Related
I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>
I want to call a function that opens a new link. I want to do this after all my images have been clicked on. How can i achieve this?
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="windows-1252">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"> </script>
<![endif]-->
<title>Date med mig - version b
</title>
<script type="text/javascript">
function newWindow()
{
window.location = window.location = "http://www.tv3.se/datemedmig"
}
</script>
</head>
<body>
<h1>Del 2: Date med mig</h1>
<img src="1_c.jpg" id="image1" onclick="this.src='1_o.jpg';" alt="image" />
<img src="2_c.jpg" id="image1" onclick="this.src='2_o.jpg';" alt="image" />
<img src="3_c.jpg" id="image1" onclick="this.src='3_o.jpg';" alt="image" />
<img src="4_c.jpg" id="image1" onclick="this.src='4_o.jpg';" alt="image" />
</body>
</html>
If you are trying to just load a new window as soon as any image is clicked, I think the way that #runfaj said to do it is probably the best, It is my understanding that you want to do it only after ALL images have been clicked on?
If this is the case, here's one option (which is probably not the most efficient)
//Assuming there are 4 images
var hasBeenClicked = [false,false,false,false]
//To be called when each image is clicked
function imageClicked(whichImage){
this.src = "'"+whichImage+"_o.jpg'"
//set this position in the array equal to true
hasBeenClicked[whichImage] = true
// if the array is completely true (every image has been clicked)
// call the newWindow function
if(hasBeenClicked == [true,true,true,true]){
newWindow();
}
}
Then when you create an image:
<img src="1_c.jpg" id="image1" onclick="imageClicked(1);" alt="image" />
you could do it three ways:
jquery:
$('img').click(newWindow);
inline:
<img src=..... onclick="newWindow()" />
regular javascript:
get all the tags with:
var imgs = document.getElementByTagName('img');
then add an event listener to each one (google it for lots of different examples)
Have an onclick function that triggers for each image which sets a new attribute on the image tag. Then run a loop over all images to check that they all have the tag. If so, open new windows. For example:
$('img').click(function() {
$(this).data('was-clicked', true);
var all_clicked = true;
$('img').each(function() {
if($(this).data('was-clicked') != true) {
all_clicked = false;
break;
}
});
if(all_clicked == true) newWindow();
});
Note, this code is not tested and may have syntax/semantic errors. Also, you may not really want the user to click ALL image tags (e.g. banners, backgrounds, etc), so you should modify the jquery selectors to filter only the 'img' tags you're interested in, e.g. $('#my-gallery img')...
I have an ajax web application, where every 10 seconds I request content from the server. The server sends back HTML with links to images. Right now, I set the innerHTML of a div tag to the HTML returned from the server, which dynamically updates the web page with out reloading the whole page.
HOWEVER, the problem is, the images load separately after setting the innerHTML causing the application to look funky and slow.
How can I have all my images ready and then swap the innerHTML when I have all the resources?
Add an attribute(or data attribute) to the DOM of the images, then with jQuery listen for the "loaded" event change the attribute loaded to be true. Then verify if still images in the queue, if not execute a callback for the complete process.
Markup:
<img src="img/1.png" class="imgToLoad" loaded="false" />
<img src="img/2.png" class="imgToLoad" loaded="false" />
<img src="img/3.png" class="imgToLoad" loaded="false" />
<img src="img/4.png" class="imgToLoad" loaded="false" />
Pseudocode:
function allImagesLoaded(){
$('#yourmaindiv').show();
console.log('images loaded!');
}
$('img.imgToLoad').load(function(){
$(this).attr('loaded', 'true');
if( $('img.imgToLoad[loaded=false]').length === 0 ){
allImagesLoaded();
}
});
For your images :
JavaScript
$(function () {
preload();
function preload() {
var imageObj = new Image(),
images = [];
images[0] = 'img/1.png';
images[1] = 'img/2.png';
images[2] = 'img/3.png';
images[3] = 'img/4.png';
images[4] = 'img/5.png';
for (var i = 0; i < images.length; i++) {
imageObj.src = images[i];
}
}
});
HTML
<body>
....
<!--[if IE]>
<div id="preload">
<img src="img/1.png" width="1" height="1" alt="" />
<img src="img/2.png" width="1" height="1" alt="" />
<img src="img/3.png" width="1" height="1" alt="" />
<img src="img/4.png" width="1" height="1" alt="" />
<img src="img/5.png" width="1" height="1" alt="" />
</div>
<![endif]-->
</body>
CSS for IE
#preload {
position: absolute;
overflow: hidden;
left: -9999px;
top: -9999px;
height: 1px;
width: 1px;
}
JavaScript would probably do it, I have searched but found nothing to do with maxWidth. Only resizing images out of the blue.
What I need is a piece of JavaScript code to resize an image if it's too big(defined in a variable.)
Is there some reason why you can't use the max-width CSS property to do what you want, like:
<img src="myImage.png" style="max-width: 600px;">
...or even better:
<style>
.widthConstrained {
max-width: 600px;
}
</style>
...
<img src="myImage.png" class="widthConstrained">
Edit:
If you must use JavaScript for compatibility reasons, I suggest that you use something like the code specified in this question to check the total image width after it loads, and clamp it down if needed, roughly like:
var img = $("img")[0]; // Get my img elem
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
if (this.width > maxWidth) {
$(img).width(maxWidth);
}
});
I take it you have a <img /> tag in your webpage.
To shrink images that are too large, simply insert the width and height attribute, along with your image source and a alt, along with a ID.
<head>
<script type="text/javascript" />
function pie()
{
var pathToImage = "bla/bla/Image.jpg";
document.GetElementByID(Image1).setAttribute("src",pathToImage);
}
</script>
</head>
<body onload=Pie() >
<img ID="Image1" alt="random Image" width="300px" Height="200px" />
</body>
I have barely any experience working with DOM and using Javascript, and I have a very specific task that I'm trying to accomplish.
Let's say I have an image in my HTML:
<img src="foo.jpg" />
When the site loads, I want to take that image (all images in the document, actually), and wrap them in a link:
<img src="foo.jpg" />
What could I use to accomplish this? Google hasn't turned up much for me with regards to this specific task. On load, I can access and iterate all the images in the document... but I'm not sure where to go from there in order to wrap the image in a link.
You could try something among the lines:
window.onload = function() {
var images = document.getElementsByTagName('img');
for (var i = 0, image = images[i]; i < images.length; i++) {
var wrapper = document.createElement('a');
wrapper.setAttribute('href', 'http://www.foobar.com');
wrapper.appendChild(image.cloneNode(true));
image.parentNode.replaceChild(wrapper, image);
}
};
I would recommend you using the excellent jQuery library to manipulate the DOM:
$(function() {
$('img').wrap('<a href="http://foo.com">');
});
In the following example, all images become wrapped in a link to their source. So if an image has the src of //example.com, it will be wrapped with an anchor(link) to //example.com.
Of course you don't want some of the images linked so you can add the data attribute nolink, like so:
<img src="//lorempixel.com/400/200 data-nolink />
<!DOCTYPE html>
<html lang="en-GB">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Include jQuery 1.11.1 -->
<script>
$(function() { //Run once DOM is ready
$('img:not([data-nolink])').each(function() { //Iterate through each img element
$(this).wrap('<a href="' + $(this).attr('src') + '">'); //Wrap with link to own src
});
});
</script>
<style>
h3 {
text-align: justify;
}
img {
width: 200px;
margin: 24px;
}
</style>
</head>
<body>
<h3>These images are generated randomly by loremPixel; So you will be presented by a different image to what you see here, when you click on any of the links </h3>
<hr />
<br />
<img src="//lorempixel.com/400/200?samp1" />
<img src="//lorempixel.com/400/200?samp2" />
<img src="//lorempixel.com/400/200?samp3" data-nolink/> <!-- Add data-nolink to prevent auto-linking -->
<img src="//lorempixel.com/400/200?samp4" />
<img src="//lorempixel.com/400/200?samp5" />
<img src="//lorempixel.com/400/200?samp6" />
</body>
</html>