I have
<img src="..." class="myImage">
<a href="..." class="changeImage">
$(function(){
$('a.changeImage').click(function(){
$('img.myImage').attr('src',NEWVALUE);
});
});
When I click the link, i inject a new src to .myImage. Is it possibile to show a loading image while the new src is loading?
Yes, you should use image preloading
var newImage = new Image();
var loadingSrc = 'loading.gif';
$('img.myImage').attr('src', loadingSrc);
newImage.onload = function() {
$('img.myImage').attr('src', newImage.src);
};
newImage.src = NEWVALUE;
$(function(){
$('a.changeImage').click(function(e){
e.preventDefault();
//show the loading div
$('img.myImage').attr('src',NEWVALUE);
$("img").trigger("onload");
});
$("img").bind("onload",function(){
//remove the loading div
});
});
http://jsfiddle.net/PrXSW/9/
You can use the load event (untested code)
<img src="smallLoader.png" alt="loading" id="loading" />
<img alt="bigImage" id="bigImage" style="display:none" />
<script type="text/javascript">
$(document).ready(function() {
$('#bigImage').load(function() {
$('#loading').hide();
$('#bigImage').show();
});
$('#bigImage').attr("src", "bigimage.png");
});
</script>
Take a look to the jquery.blockui plugin. It may fit your needing.
the simplest solution would be to declare the loading img via CSS as background-image.
#loaded-image {
/* shows loading icon until picture is fully loaded */
background-image: url(loading.gif);
background-repeat: no-repeat;
}
Related
I am currently trying to set the source of an image HTML tag using jquery and then get the height and the width of the image. However, when trying to do so with the following code, the width I get is 0 and same with height :
$(document).ready(function() {
$("#image").attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
console.log($("#image").width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<img id="image" />
</div>
I am trying to do this in order to change the image src of the same HTML tag and get the new width and height.
I found that it was due to the image not loaded in the DOM so I tried some things I found on internet as the two following snippets but with the same result of a width of 0 and a height of 0 :
$(document).ready(function() {
$(`<img id='image' src='${"https://via.placeholder.com/600x160.png?text=Testing Image"}'>`).appendTo('#container');
console.log($("#image").width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>
$(document).ready(function() {
let image = new Image();
image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
image.id = "image";
$('#container').append(image);
console.log($("#image").width());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
</div>
I do not know if you can understand my needs, but I would really appreciate help there.
Thanks in advance.
You should use a load event, in order to wait until the image is loaded and has been shown up
see below snippet :
using Jquery :
$(document).ready(function() {
var $image = $("#image");
$image.attr("src", "https://via.placeholder.com/600x160.png?text=Testing Image");
$image.on("load", function() {
console.log($(this).width(),"X",$(this).height());
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<img id="image" />
</div>
using pure js :
let image = new Image();
image.src = "https://via.placeholder.com/600x160.png?text=Testing Image";
image.id = "image";
image.addEventListener("load", function(event) {
console.log(this.width ,"x",this.height)
});
let container = document.getElementById("container")
container.appendChild(image);
<div id="container" ></div>
You need to listen image's onload event listener:
const img = new Image();
img.setAttribute('src', 'https://via.placeholder.com/150');
console.log('img width before load', img.width);
img.addEventListener('load', () => console.log('img width after load', img.width));
document.body.appendChild(img);
I need to load a default image in the event that the image is broken. This also needs to apply to dynamic images. Always limited by class.
I found a similar question Jquery on image error not working on dynamic images? but it doesn't seem to work for dynamic images in my case
DEMO https://jsfiddle.net/sb8303aq/1/
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
});
you can put error function into append function.
$('img.myClass').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
$("button").click(function(){
$('body').append('<img src="http://image_doesn-t_exist_url" class="myClass" />');
$('img').on("error", function () {
this.src = 'http://placehold.it/150x150&text=PLACEHOLDER';
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://placehold.it/150x150&text=img%20loaded" />
<img src="http://image_doesn-t_exist_url" class='myClass' />
<p>
<button>
Add Image
</button>
</p>
This JS replace image file name default.jpg to hqdefault.jpg from all images below. But now I'm trying to add class to Image, if Image src has img.youtube.com link on images by extending this JS.
JS:
$('#selector img').attr('src',function(i,e){
return $(this).attr('src').replace("default.jpg","hqdefault.jpg");
});
HTML:
<div id="selector">
<img src="http://img.youtube.com/vi/qDc_5zpBj7s/default.jpg">
<img src="http://img.youtube.com/vi/ss7EJ-PW2Uk/default.jpg">
<img src="http://img.youtube.com/vi/ktd4_rCHTNI/default.jpg">
<img src="http://img.youtube.com/vi/0GTXMEPDpps/default.jpg">
</div>
Means, If image src has Youtube image then add a class .video to parent image.
Try:
$('#selector img').each(function(i) {
var self = $(this);
var src = self.attr('src');
if (src.match(/img.youtube.com/)) {
self.attr('src', src.replace("/default.jpg","/hqdefault.jpg"));
self.addClass('video');
}
});
You can add a condition before replacing and add video class.
$('#selector img').attr('src',function(i,e){
if($(this).attr('src').search('img.youtube.com') > 0){
$(this).addClass('video');
}
return $(this).attr('src').replace("default.jpg","hqdefault.jpg");
});
Say for example i have a div with image source
<div>
<p class="row">With custom CSS</p>
<img src="/images/midhun.jpg">
</div>
On button click i need to open this image screen shot in another div
Can you tell the steps to take the screen shot of that image
Assuming, you want to show the image in other div.
HTML:
<div id="main">
<img src="https://lh5.googleusercontent.com/-XOGfvAHr7HQ/UvoUItkZMZI/AAAAAAAAHJk/IJz5JcUB9dw/w520-h274-no/scopes_in_directives.png" />
</div>
<div id="copy">
</div>
<button id="myButton">Click</button>
Javascript:
$('#myButton').on('click', function() {
$('#copy').html($('#main').html());
});
Demo: https://jsfiddle.net/tusharj/uapf99nt/
You don't need to take any screenshot. The image is already loaded, so you can just show the same image again:
HTML
<div id="originalDiv">
<img src="/images/midhun.jpg">
</div>
<div id="secondDiv">
<img src="" />
</div>
CSS
#secondDiv { display:none }
jQuery
$(document).on('click', '#button', function() {
var img = $('#originalDiv > img').attr('src');
$('#secondDiv > img').attr('src', img).show();
});
look here. it attempts to render a part of the dom, into an image
http://html2canvas.hertzen.com/
Check this link to take a screenshot..
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
canvas.toBlob(function(blob) {
saveAs(blob, "Dashboard.png");
});
}
});
});
});
I have a simple script that swaps an image in a div when you click on a thumbnail image. Like an image gallery. Works perfectly in IE 9 and above and in chrome firefox and so on. Just not in IE8 It will swap the image 1 or 2 times then it just stops working. I got this script off another forum, and I am a novice when it comes to scripts. I would appreciate any advice. this is the javascript.
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
var i = $('<img />').attr('src',this.href).load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
});
return false;
});
});
</script>
Here is the html
<div id="imageWrap">
<img src="images/main/blue.JPG" alt="Main Image" id="mainImage"/>
</div>
<!-- thumbnails are links to the full size image -->
<img src="images/main/blue_thumb.JPG" alt="Image 1"/>
<img src="images/main/green_thumb.JPG" alt="Image 2"/>
<img src="images/main/red_thumb.JPG" alt="Image 3"/>
<img src="images/main/purple_thumb.JPG" alt="Image 4"/>
and the css
#imageWrap {
width: 640px;
height: 510px;
background: url(../../images/main/ajax-loader.gif) center center no-repeat;
}
here is the link to the sample I have up.
http://www.rkshootingsupply.com/test
Your problem is that you're setting the source of the image before adding the event listener. When the src is changed for the first time it is requested from the server and this takes a bit of time; meaning that the event listener has chance to be attached before the image loads and subsequently triggers the load event. Then when you load the image the next time, IE fetches the image from its local cache and the load event is triggered before the event is attached. This will result in the JavaScript not knowing that the image has loaded and thus not updating it on the page.
Here is the modified code which changes the source after the event listener is attached.
$(document).ready(function() {
$('.thumbnail').live("click", function() {
$('#mainImage').hide();
$('#imageWrap').css('background-image', "url('images/main/ajax-loader.gif')");
var i = $('<img />').load(function() {
$('#mainImage').attr('src', i.attr('src'));
$('#imageWrap').css('background-image', 'none');
$('#mainImage').fadeIn();
}).attr('src',this.href);
return false;
});
});