Using AngularJS:
I'm displaying a list of images with ng-repeat. When I reset and rebuild the model (get new data from backend), I'm displaying the same images as before.
I understand these are new elements created by ng-repeat, but the image srcs are the same. Unlike IE or firefox, Chrome tries and gets a 403 for those same images and then renders them.
That causes a flicker. On IE and Firefox the images come from cache. No hit on the server to check for image changes. No flicker.
How can I prevent that? Should the images be served with some cache header? I tried loading the images to a dataurl, but then I hit the CORS problem, and would have to proxy those images on the backend to get them.
Possibly related: Chrome sometimes reloads image after jQuery .appendTo, recieves 304
Thanks
Some fix would be related to preload the images in javascript and after that display them
function loadImages(arrayOfImgs) {
var imageNumber=0;
$(arrayOfImgs).each(function(){
(new Image()).src = this;
if(arrayOfImgs.length == imageNumber) $scope.showImages = true;
else imageNumber++;
});
}
// Usage:
loadImages([
'img1.jpg',
'img2.jpg'
]);
if you are retriving images from backend use it at success promise
i hope it helps you
Check that example retrinving images from backend:
$scope.loading = true;
getImages().then(function (response) {
var objects= response.results;
var listImages = [];
angular.forEach(objects, function (item) {
listImages.push(item.UrlImage);
});
function preload(arrayOfImages) {
var numImages = 0;
$(arrayOfImages).each(function () {
var img = (new Image());
img.src = this;
$(img).load(function () {
numImages++;
if (numImages == arrayOfImages.length){
$scope.loading = false;
}
});
});
}
preload(listImages);
});
Related
I would like to validate by file dimensions (resolution).
on the documentation page there is only information regarding file name and size, nothing at all in the docs about dimensions, and I also had no luck on Google.
The purpose of this is that I don't want users to upload low-res photos to my server. Thanks.
As Ray Nicholus had suggested, using the getFile method to get the File object and then use that with the internal instance object qq.ImageValidation to run fineuploader's validation on the file. A promise must be return because this proccess is async.
function onSubmit(e, id, filename){
var promise = validateByDimensions(id, [1024, 600]);
return promise;
}
function validateByDimensions(id, dimensionsArr){
var deferred = new $.Deferred(),
file = uploaderElm.fineUploader('getFile', id),
imageValidator = new qq.ImageValidation(file, function(){}),
result = imageValidator.validate({
minWidth : dimensionsArr[0],
minHeight : dimensionsArr[1]
});
result.done(function(status){
if( status )
deferred.reject();
else
deferred.resolve();
});
return deferred.promise();
}
Remained question:
Now I wonder how to show the thumbnail of the image that was rejected, while not uploading it to the server, the UI could mark in a different color as an "invalid image", yet the user could see which images we valid and which weren't...
- Update - (regarding the question above)
While I do not see how I could have the default behavior of a thumbnail added to the uploader, but not being uploaded, but there is a way to generate thumbnail manually, like so:
var img = new Image();
uploaderElm.fineUploader("drawThumbnail", id, img, 200, false);
but then I'll to create an item to be inserted to qq-upload-list myself, and handle it all myself..but still it's not so hard.
Update (get even more control over dimensions validation)
You will have to edit (currently) the qq.ImageValidation function to expose outside the private function getWidthHeight. just change that function deceleration to:
this.getWidthHeight = function(){
Also, it would be even better to change the this.validate function to:
this.validate = function(limits) {
var validationEffort = new qq.Promise();
log("Attempting to validate image.");
if (hasNonZeroLimits(limits)) {
this.getWidthHeight().done(function(dimensions){
var failingLimit = getFailingLimit(limits, dimensions);
if (failingLimit) {
validationEffort.failure({ fail:failingLimit, dimensions:dimensions });
}
else {
validationEffort.success({ dimensions:dimensions });
}
}, validationEffort.success);
}
else {
validationEffort.success();
}
return validationEffort;
};
So you would get the fail reason, as well as the dimensions. always nice to have more control.
Now, we could write the custom validation like this:
function validateFileDimensions(dimensionsLimits){
var deferred = new $.Deferred(),
file = this.holderElm.fineUploader('getFile', id),
imageValidator = new qq.ImageValidation(file, function(){});
imageValidator.getWidthHeight().done(function(dimensions){
var minWidth = dimensions.width > dimensionsLimits.width,
minHeight = dimensions.height > dimensionsLimits.height;
// if min-width or min-height satisfied the limits, then approve the image
if( minWidth || minHeight )
deferred.resolve();
else
deferred.reject();
});
return deferred.promise();
}
This approach gives much more flexibility. For example, you would want to have different validation for portrait images than landscape ones, you could easily identify the image orientation and run your own custom code to do whatever.
i have problem with refreshing content in wrapper after it is loaded by ajax.
When i check with firebug - XHR is showing request and i can see elements loaded but it isn't showing on page.
This is what i am using for pullDown function to get ajax content
function pullDownAction () {
setTimeout(function () {
var el, li, i;
el = document.getElementById('thelist');
var http = new XMLHttpRequest();
var url = window.location;
http.open("GET",url,true);
http.send();
myScroll.destroy();
myScroll = null;
loaded();
}, 1000);
}
It looks like as content is stuck between showing on webpage and ajax request.
Any idea?
myScroll.refresh() (instead of .destroy() and recalling "loaded()") should do the trick!
If you're using IScroll4 you can try to use the checkDOMChanges:true option of iscroll.
If it still won't work - it could be a CSS issue caused by the scroll-wrapper (#scroller) not expanding with its content. (float,position:absolute; or something like that)
EDIT: it seems to me as you're not handling a responseText of the request at all!
According to this example you need an event handler for the onreadystatechange event:
http.open("GET",url,true);
http.onreadystatechange = function () {
if (http.readyState == 4) {
alert(http.responseText); //handle this response! (i.e. writing to an element's innerHTML)
}
};
http.send(null);
I want to load external images on my page asynchronously using jQuery and I have tried the following:
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});
But it always returns error, is it even possible to load image like this?
I tried to use .load method and it works but I have no idea how I can set timeout if the image is not available (404). How can I do this?
No need for ajax. You can create a new image element, set its source attribute and place it somewhere in the document once it has finished loading:
var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
.on('load', function() {
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#something").append(img);
}
});
IF YOU REALLY NEED TO USE AJAX...
I came accross usecases where the onload handlers were not the right choice. In my case when printing via javascript. So there are actually two options to use AJAX style for this:
Solution 1
Use Base64 image data and a REST image service. If you have your own webservice, you can add a JSP/PHP REST script that offers images in Base64 encoding. Now how is that useful? I came across a cool new syntax for image encoding:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>
So you can load the Image Base64 data using Ajax and then on completion you build the Base64 data string to the image! Great fun :). I recommend to use this site http://www.freeformatter.com/base64-encoder.html for image encoding.
$.ajax({
url : 'BASE64_IMAGE_REST_URL',
processData : false,
}).always(function(b64data){
$("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});
Solution2:
Trick the browser to use its cache. This gives you a nice fadeIn() when the resource is in the browsers cache:
var url = 'IMAGE_URL';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#IMAGE_ID").attr("src", url).fadeIn();
});
However, both methods have its drawbacks: The first one only works on modern browsers. The second one has performance glitches and relies on assumption how the cache will be used.
cheers,
will
Using jQuery you may simply change the "src" attribute to "data-src". The image won't be loaded. But the location is stored with the tag. Which I like.
<img class="loadlater" data-src="path/to/image.ext"/>
A Simple piece of jQuery copies data-src to src, which will start loading the image when you need it. In my case when the page has finished loading.
$(document).ready(function(){
$(".loadlater").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
});
I bet the jQuery code could be abbreviated, but it is understandable this way.
$(<img />).attr('src','http://somedomain.com/image.jpg');
Should be better than ajax because if its a gallery and you are looping through a list of pics, if the image is already in cache, it wont send another request to server. It will request in the case of jQuery/ajax and return a HTTP 304 (Not modified) and then use original image from cache if its already there. The above method reduces an empty request to server after the first loop of images in the gallery.
You can use a Deferred objects for ASYNC loading.
function load_img_async(source) {
return $.Deferred (function (task) {
var image = new Image();
image.onload = function () {task.resolve(image);}
image.onerror = function () {task.reject();}
image.src=source;
}).promise();
}
$.when(load_img_async(IMAGE_URL)).done(function (image) {
$(#id).empty().append(image);
});
Please pay attention: image.onload must be before image.src to prevent problems with cache.
If you just want to set the source of the image you can use this.
$("img").attr('src','http://somedomain.com/image.jpg');
This works too ..
var image = new Image();
image.src = 'image url';
image.onload = function(e){
// functionalities on load
}
$("#img-container").append(image);
AFAIK you would have to do a .load() function here as apposed to the .ajax(), but you could use jQuery setTimeout to keep it live (ish)
<script>
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
$("#placeholder").load("PATH TO IMAGE");
var refreshId = setInterval(function() {
$("#placeholder").load("PATH TO IMAGE");
}, 500);
});
</script>
use .load to load your image. to test if you get an error ( let's say 404 ) you can do the following:
$("#img_id").error(function(){
//$(this).hide();
//alert("img not loaded");
//some action you whant here
});
careful - .error() event will not trigger when the src attribute is empty for an image.
//Puedes optar por esta solución:
var img = document.createElement('img');
img.setAttribute('src', element.source)
img.addEventListener('load', function(){
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#imagenesHub").append(img);
}
});
$(function () {
if ($('#hdnFromGLMS')[0].value == 'MB9262') {
$('.clr').append('<img src="~/Images/CDAB_london.jpg">');
}
else
{
$('.clr').css("display", "none");
$('#imgIreland').css("display", "block");
$('.clrIrland').append('<img src="~/Images/Ireland-v1.jpg">');
}
});
Is there a way to render content only after it's fully downloaded using AJAX/get/load with jQuery?
As it stands currently, the loader shows while the 'html' is being downloaded, but once that's done it starts rendering. There's lots of images in the html so they start loading independently after the render.
Is this good design practice? In my opinion once the loader disappears, everything should render 100%, but of course this will increase load time.
Can I achieve this without any 'hacks'?
$(document).ready(function() {
$('#clicks').click(function(){
$('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
$.get("moreProjects.html", function(datas){
$('#portfolio').append(datas);
}, 'html').complete(function() {
$('#loader').hide();
});
return false;
});
});
You could always store the data returned in a variable and then append it in the complete function:
var returnedData;
$('#clicks').click(function(){
$('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
$.get("moreProjects.html", function(datas){
returnedData = datas;
}, 'html').complete(function() {
$('#portfolio').append(returnedData);
$('#loader').hide();
});
return false;
});
Another option would be to use a hidden div container to load the content and then show on complete:
$('#clicks').click(function(){
$('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
$('#portfolio').append("<div id='content' style='display:none'></div>");
$.get("moreProjects.html", function(datas){
$('#portfolio #content').append(datas);
}, 'html').complete(function() {
$('#portfolio #content').show();
$('#loader').hide();
});
return false;
});
Get the HTML, place it on your page or preload with JS, if placing it on your page the images can not be hidden if they are to be loaded, but they can be placed of screen.
When the images are loaded, move the HTML to your portfolio element.
The code below is just an example, not tested, and the load function will probably fire on the first image that is loaded, I think ?
If so you will have to count the images, place a load function on each image, and then show the HTML when all images have loaded, or you could try just attaching the load function to the last image in your HTML, but there is no guarantee that the last image in the markup is also the last to load, but it often is.
There could also be a problem with load if images are cached by the browser, if so you need to find another solution, or turn of caching in $.ajax!
$('#clicks').on('click', function(){
$('#portfolio').append("<div id='loader'><img src='images/loader.gif'/></div>");
var jqxhr = $.ajax({
type:'GET',
url: 'moreProjects.html',
datatype: 'html',
done: function(datas) {
$('<div id="somediv"></div>').append(datas)
.css({position: 'fixed', left: -5000})
.appendTo('body');
}
});
jqxhr.always(function() {
$('img', '#somediv').on('load', function() {
$('#loader').remove();
$('#portfolio').append($('#somediv').contents());
});
});
return false;
});
Check this link, the last post: Wait untill all images are loaded
In my opinion what you have to do is to save the html in a variable,
then filter out all the img tags and pass it to the _loadimages function
in the post i give you setting the complete callback.
Something like this:
var $retData = $(datas);
var $imgs = $retData.find('img');
_loadimages($imgs,function(){
$('#portfolio #content').append($retData);
});
With firebugs net tab open i stated zooming in and out of google map and i found its making requests for the png images.
Ok with this i understood that we can request the images using the Ajax. but wait ? i always used to request html, jsox, txt and xml. Image ........ its strange for me ? Can some one please elaborate on this ?
Also i would like to know if text is downloaded we add it to some DOM element and it show up. How images retried from the ajax can be accessed ?
Any help or pointer will be great help :)
GMaps doesn't make XMLHttpRequests to get the images. They instead use a normal <img /> element that is injected via javascript.
They then use the "onload" and "onerror" events to detect if the image was loaded correctly.
They retry a download of the image if it times out. This is achieved by setting a timer and once it expires re-setting the src property of the image.
var tile = document.createElement('img');
var url = 'http://sometilehost/X.Y.Z.png';
var downloadTimeout = 10000; // Retry in 10 seconds
// Tile downloaded successfully
tile.onload = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile downloaded');
};
// The tile couldn't be downloaded. 404, 503 ...
tile.onerror = function (e) {
window.clearTimeout(tile.downloadTimer);
alert('tile not downloaded');
};
// This will fire if the tile doesn't download in time
tile.downloadTimer = window.setTimeout(function () {
tile.src = url; // Start the download again
}, downloadTimeout);
tile.src = url;