So this is really weird. If you go to http://floridahome.palmbeachpost.com/ in Safari and do a search for listings, you'll see our image not found come up on results where the images really should come up. If you don't see what I'm talking about the on the first page, click through a couple pages. If you do the same search in Firefox or IE the images should show up.
What is weird is that it looks like the images load for a split second and then disappear. The onerror event gets thrown and that's why we show the place holder image.
If anyone can shed some light on this I'd be forever grateful.
(I know our source doesn't validate, I'm going to work on that tomorrow first thing)
In YAHOO.backyardpost.init(), there’s this:
var imgs = document.images;
for (var i = 0; i < imgs.length; i++) {
if ((!imgs[i].complete ||
imgs[i].naturalHeight == 0 ||
imgs[i].naturalWidth == 0) &&
imgs[i].src.match(/services\.palmbeachpost/i))
{
imgs[i].src = '/static/img/gfx/img_not_available.jpg';
}
}
When does this get called and are you certain that the images have completely loaded at the time it’s called?
I can’t set a breakpoint on this line given the minified code, but I would suspect that one of the conditions—possibly imgs[i].complete—is not true and causing the image to be replaced.
There is anecdotal evidence [1] [2] that the complete attribute doesn’t always work in Safari.
Related
I have a database with image paths. through PHP, I insert the pictures on my website. The problem is that the code that I have won't work. So, I decided to put some alerts to figure out what is the issue. After going through the alerts, I noticed that the images were resized and repositioned. After some reading, I found out that this is because the javascript is executed in the same time as the HTML and CSS and the alert halts the javascript, letting the HTML and CSS to be executed. How should I change my code to make the images work? This is the code in question:
var box = document.getElementsByClassName("produs");
var pic = document.getElementsByClassName("imagine_produs");
var i;
for (i = 0; i < pic.length; i++) {
alert(pic[i].width);
if ( pic[i].width > 200 ) {
pic[i].width="200";
alert(pic[i].width);
}
var marg = (box[i].clientWidth - pic[i].clientWidth ) / 2;
pic[i].style.marginLeft = marg + "px";
pic[i].style.marginRight = marg + "px";
}
Also, I have made a photo album that is in order to show how the code executes:
What other way is there to either halt the code or to rearrange it so that it works like in the last picture?
THanks!
You might use
console.log()
instead of alert() for debugging purposes. That way you can monitor what your code is doing without interrupting it with prompts.
Apart from that, the funtionality of your code might better be realised with CSS eventually (i.e. margin:auto; img max-width:90%; …).
Hello Stack Overflow community, recently, I've been working on a quick image display using jQuery. It has a list of possible images that can be picked and displayed at random. The issue is, after the page has finished loading, jQuery ceases to detect image load errors for if the image is invalid.
My current method of finding and fixing errors is as follows:
$('img').error(function() {
$(this).attr('src',getImgUrl());
});
This, in normal circumstances such as the page being loaded, picks a valid image, even if multiple invalid images are specified in a row. However, after the page is finished loading, if an invalid image is picked, and fails to load, this function is not even called. Strangely enough though, if I add an onerror attribute to all images, they are always called from the onerror no matter if the page was freshly loaded or not, so why is jQuery having this issue? Any help is appreciated, thanks.
UPDATE:
It also appears this is happening to other jQuery functions as well, such as click.
UPDATE:
It would appear to be an issue with jQuery recognizing new elements on a page, such as newly created images.
UPDATE for those asking getImageUrl:
function getImgUrl()
{
var text = (Math.round(Math.random() * 3)).toString();
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for(var i=0; i < 4; i++ )
text += possible.charAt(Math.floor(Math.random() * possible.length));
return '/' + text;
}
All this does is pick a random URL, which matches occasionally to an image on my web-server that has many many images.
It would appear that jQuery has issues recognizing new elements on the page, so the way I fixed this was instead of deleting and adding images to the page, I just edited the existing SRC of images when doing changes, which strangely enough, the jQuery error function responds perfectly to.
Here's the refresh function I ended up coming up with for all interested:
function refreshImages()
{
var images = 10;
for(var i = 0;i < images;i++)
{
var url = getImgUrl();
$('#thumb' + i).attr('src',url);
if(i == 0)
{
$('#fullimage').attr('src',url);
$('.thumb').css('border','2px solid white');
}
}
resize();
}
while PhotoSwipe has been fantastic so far just these minor issues that I can't seem to get around
I initialize PhotoSwipe as follows
formPhoto.gallery = window.Code.PhotoSwipe.attach( images, options);
And inside a Gallery, a user can choose whether to delete an image or not via
Once the delete button is pushed this is run
formPhoto.gallery.cache.images.splice(e.target.currentIndex,1);
delete formPhoto.activeObj.value[e.target.originalImages[e.target.currentIndex].id];
if(formPhoto.gallery.cache.images.length == 0)
formPhoto.gallery.hide();
else
formPhoto.gallery.carousel.show( 0 );
Now this works mostly fine, except in 2 cases.
If you are below 3 photos, it breaks the slide event (on slide right) - The image slides onto a black screen. If you delete and only have 1 image left, you can't even view the image properly it just bounces back onto a black screen.
If you add images back into the gallery again, the old images that were deleted are shown again
It is reinitiated using
images = [];
for(var x in formPhoto.activeObj.value)
images.push({url: formPhoto.activeObj.value[x].file, id:x});
formPhoto.gallery = window.Code.PhotoSwipe.attach( images, options);
If you want, I can try grab a recording of whats going on. I'm not sure how to solve this, I've looked around on the https://github.com/codecomputerlove/PhotoSwipe/issues and google but nothing helpful.
All I really want to do is just remove an image from the Gallery (its viewed in Exclusive Mode only)
Ok, I ended up writing a temporary solution.. its a bit hacky, but I just manually remove the DOM from the carousel
jQuery(formPhoto.gallery.carousel.contentEl).find("[src*=\"" + formPhoto.activeObj.value[e.target.originalImages[e.target.currentIndex].id].file + "\"]").parent().remove();
//we look for the image that contains the same filename as the one we're trying to delete.
//so we just remove that.
formPhoto.gallery.cache.images.splice(e.target.currentIndex,1);
delete formPhoto.activeObj.value[e.target.originalImages[e.target.currentIndex].id];
e.target.originalImages.splice(e.target.currentIndex, 1);
formPhoto.activeObj.object.find("[type=amountadded]").html(formPhoto.activeObj.valueLength() + " photos");
if(formPhoto.gallery.cache.images.length == 0)
formPhoto.gallery.hide();
else {
//real hacky job. Atleast it looks like a real cool effect occured.
formPhoto.galleryInitiate(formPhoto.activeObj, e.target.originalImages);
}
Also fixed the issue of the images reappearing, was because the newly generated files had the same filenames. Added a date component to the file names for the mean time.
This is the handler for a delete button
function ps_delete_image(btn) {
var inst = PhotoSwipe.instances[0];
var curImg = $photoSwipe.getCurrentImage();
inst.cache.images.splice(inst.currentIndex, 1);
inst.originalImages.splice(inst.currentIndex, 1);
if(inst.cache.images.length == 0) inst.hide();
else {
if (inst.currentIndex == inst.cache.images.length) inst.carousel.show(inst.currentIndex - 1);
else inst.carousel.show(inst.currentIndex);
}
// remove delete button if 3 or less is left
if(inst.cache.images.length <= 3) {
$(btn).remove();
}
}
To overcome issue with 3 and less images I just remove delete button.
is anybody familiar with greyBox JavaScript plugin?
orangoo.com/labs/GreyBox/
it's for slideshows and stuff.. I can't get it to work in FF/Safari; it works great in IE, but FF/Safari won't play ball..
orensanz.org/photos.html
would very much appreciate some suggestions..
supposedly there's a google group (forum) for this thing (can't post url.. this thing limits how many urls u can include in a post, it's linked to from their home pg (url above.. oh brother..) but when you link to it you land on a pg that says they've been booted out b/c they violated google's terms of service....;-)
thank you..
It looks to me as if there's a race condition in some of that Javascript code. If the image isn't in cache, then this looks to me like it'll never make the image box visible:
if(gb_type == "image") {
if(img_holder.width != 0 && img_holder.height != 0) {
var width = img_holder.width;
var height = img_holder.height;
GB.width = width;
GB.height = height;
setupOuterGB();
if(GB.use_fx) {
AJS.setOpacity(frame, 0);
AJS.fx.fadeIn(frame);
}
}
}
else {
GB.width = frame.offsetWidth;
GB.height = frame.offsetHeight;
setupOuterGB();
}
In think that code should be called as the "load" handler for the image. Note that your page works fine in Firefox the second time you click on any particular image.
if(GB.show_loading) {
AJS.AEV(window, 'load', function(e) {
loaded();
});
}
else {
loaded();
}
Try putting these lines on either a timeout or replace the lower loaded() with AJS.AEV(window, 'load', function(e) {loaded();});
(I couldn't add comment, nothing happens when click on 'add comment'..)
yes I know I can use other lightboxes.. but what I do need is one in which slideshow lands in photo the user CLICKED.. at work I've been using this one, flowplayer.org/tools/demos/scrollable/easing.html, but when you tell it to start at a given photo (not photo 1) it SLIDES towards it.. I need one in which it just lands on specified photo without the sliding effect -- other than that this one would be perfect
a lot of slick JS lightboxes out there have 'next' button on top of photo itself and other stuff obstructing photo a bit, I don't want that.. ) oh man, I still can't get this thing to work AT ALL in Safari, whereas examples they have online (orangoo.com/labs/GreyBox/) work fine in Safari, I don't get this.. thank you for your help (btw: I tried many diff settings for setTimeout, all the way from 1000 milliseconds to about 30,000.. either way Safari won't touch it.. :-(
I'm presenting a simple animation using img.src replace and the <canvas> tag. At present it's only expected to work in FireFox (FF 3.5.3, Mac OS X 10.5.5), so cross-browser compatibility isn't (yet) an issue.
When the page is first loaded, or loaded into an new window or tab, all seems to work as expected, and the cache behavior on a simple reload does not seem to be an issue; however, if I try to force a reload with shift-reload, I get a problem. Even though the images have been pre-loaded, the preloaded images for the animation don't seem to be available to the browser which then tries to load each new img.src from the server.
Am I looking at a browser bug here, or is there something buggy in my code that I can't see? This is my first shot at implementing a js class, so there might be a lot here that I don't understand.
Any insight from the assembled wise here would be welcome. You can see what I'm talking about at:
http://neolography.com/staging/mrfm/spin-sim.html
Thanks,
Jon
When you shift reload you're telling the browser to reload - not from the cache.
So it shouldn't be a surprise that you're getting the images from the server.
Images can be preloaded in javascript with the following code:
img = new Image();
img.src = "your/image/path";
If you want the images loaded before you use them that might help.
I had a look at your code and you have the following in document.ready()
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
}
}
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
the animation = new simAnim line is executed regardless if all 100 images are loaded or not...
One possibility to fix this would be to move that line inside the countLoadedImages function like so:
function countLoadedImages() {
loadedImgs++;
if (loadedImgs == images.length){
$("#loading-image").hide();
$("#controls").fadeIn(100);
animation = new simAnim("snap", "stripchart", 800, deriveFrameData(spindata));
}
}
this way that function will be executed once all the images have loaded
Thanks to ekhaled, who tried. I'm now satisfied that this is a browser bug:
Mozilla bug #504184
I have a stripped down example at http://neolography.com/staging/shift-reload/shift-reload-testcase.html which I will leave up. I encourage all to vote for this bug in the mozilla bug tracker so that it will get fixed.
j