I have been redesigning my WP portfolio website of late and have been playing with a neat little aesthetic jQuery plugin, BlackAndWhite, Which turns all of the images in my gallery view black and white and makes them recolor on hover using the HTML5 canvas.
I noticed one bug with the plugin is that if it runs before the images have finished loading, it will sometimes only grey-scale half of an image. So I have been using another tiny plugin to only run the script after I'm certain that the images have finished loading. see waitforimages.js
The initialization script is the following:
jQuery(document).ready(function(){
jQuery('.bwWrapper').waitForImages(function(){
jQuery(this).BlackAndWhite({
hoverEffect : true // default true
});
});
});
where bwWrapper is the wrapper around each img.
Now this works really nicely on most computers and browsers that I have tested thus far. Everything works the way it should. However, when I opened the site on my android, I noticed that only 50% of the images recolored. When I refresh the page, again only 50% go black and white, though it is different ones each time. Making the site fully responsive to mobile is still on my to-do list, but I have noticed this fairly blatant, yet difficult to explain bug.
Any idea what might be causing this?
You don't need to preload the images because the plug in aleady do it. Try to download the last version of the script on github https://github.com/GianlucaGuarini/jQuery.BlackAndWhite and if you still have problems send me a private mail with a link so I can check what could be the problem.
Related
I am trying to build a Wordpress website using a theme I purchased, unfortunately the maker of the theme doesn't seem to respond to any support requests.
After creating a few pages I noticed that performance is much worse on Safari compared to any other browser. I tested this on a few computers and few versions of macOS.
Example page is https://sochacki.info/proj/nepal-manaslu-circuit/
I realise that photos on the website are quite big (4000px each), but that is exactly what I want. I am happy with how quickly the pages load and how the galleries work, in Chrome, Firefox or Opera. When you click on a picture it loads PhotoSwipe JavaScript gallery so you can see them in full size, and then you can also click in top right corner to go full screen as well, or to leave the PhotoSwipe viewer. Switching between photos, going full screen or leaving PhotoSwipe are instant.
However when I load the same page in Safari, any action after clicking on a photo is slow. Switching between photos, going full screen, leaving full screen. It all takes a second or a few seconds. I can also see in Activity Monitor that CPU is used way more in Safari.
I tried a couple of things:
the theme I am using uses a custom plugin made by the same author to create these galleries, place photos and it includes PhotoSwipe files inside. Those files were one version behind (4.1.2 instead of latest 4.1.3) so I updated them, but the performance issues are the same.
I installed some other gallery plugins which use PhotoSwipe to display photos, and they did not have the performance issues, so I am not blaming it on PhotoSwipe, probably some other part of the plugin is causing the issues.
I have no real experience with JS or web development, are there any tools that could help me find what is causing the slow performance?
I checked the website speed - as I can see the Theme-Loading-time is okay. But as you already mentioned the Photo-sizes are really unfortunate as we can see in google page insights (https://developers.google.com/speed/pagespeed/insights/?hl=de&url=https%3A%2F%2Fsochacki.info%2Fproj%2Fnepal-manaslu-circuit%2F)
Try to resize the Photo-sizes in normal view (not the HeightxWidth > the kB)
I have an image manager that shows a fixed sized grid of images. The thumbnails are relatively small already so I can't really make them smaller. I implemented lazy loading and using a debounce function to check if the images on in the visible region. This increased the speed of launching my image manager. However, if I scroll while the new batch of images are being loaded, the scrolling becomes very slow. Is there anyway around this or to further optimize loading images?
EDIT:
Is there a way to prevent scrolling while a new batch of images are coming in? Kind of like how Youtube just keeps bouncing when we try to scroll to see more comments while they are still being loaded?
Try not to load all the images at once (which I guess you've implemented with Lazy loading), I'm aware that the users online have a high tendency to scroll fast.
I would suggest, few things here:
First
Implementing the Lazy loading in a correct way is essential. here is a list of few best techniques, make sure which works best for you.
You've mentioned, that the thumbnails are relatively small, however I assume only specifying smaller dimensions is not sufficient, I hope you have covered this ground, Else maintain two folder one for Actual images and another for Thumbnails on your hosting server.
Even though we take utmost care, users upload tons of heavy images on our server, if that is the case, you need to resize the images on client end and then upload on the server, one copy in Actual images and another for Thumbnails
If you are talking about product images, keep the PNGs, Why, because they are far better then BMPs and JPGs. Also you can compress them with online tools like https://tinypng.com/ OR with softwares like https://pngquant.org/
Hope this helps resolve your issue, coz it did to resolve mine.
--N Baua
It turns out the slow scrolling was due to me calling getBoundingClientRect() to find new visible images while there were some images still being loaded. That caused a reflow which bogged everything down.
I changed it to load images in batches so that getBoundingClientRect() isnt called when there are images being loaded.
My PhoneGap application uses slide in and slide out animations using entirely CSS animations.
You can find the project I based my app on here.
As you can see from the demo the slide transition is quite smooth, but as soon as I add images, after the new page is loaded it flickers/blinks for a fraction of second. The interesting thing is that all the UI elements are shown on screen and then the flickers occurs. More, sometimes the page scrolling becomes buggy and it doesn't let me scroll to the bottom of the page where my images are.
I cached the images using CSS to improve image load but again no luck.
I also found on different blogs about a similar issue on JQ mobile and tried adding without luck:
webkit-backface-visibility: hidden;
You don't know how much I appreciate your help I spent my whole Saturday trying to figure this out.
After some hours of fiddling I realized that the issue was because of the scrolling mechanism and fixed header which are poorly supported by -webkit browser. I am now using iscroll 5 and the issue disappeared.
it is due to you JS files
if you load the more js file on html page then it will take time you will find the filck in phonegap application
when you develop application in phonegap then try to use single page architecture to develop application that must be the better option
even i am suffer this problem.
Thanks in advance for any help.
I'm currently using a nice animated GIF that i designed as the header logo for my site. This was working until I put in a vertical scrolling gallery.
When the gallery starts to scroll (2 seconds after the page loads) the GIF freezes and doesnt continue until the gallery is paused. The gallery works on a setInterval function and moves the images in the scroller a fraction each interval.
I've read that this is a documented problem with IE8 and has been fixed for IE9 (which works fine - and yes, I have tested it in IE9, unfortunately it has shaken my foundation of hating IE as it works quite nicely).
Anyway, has anyone got any ideas for a work around to get the GIF to animate at the same time as the gallery in IE8? I've tried an Iframe and preloading the image. However, if you want to suggest those ideas it would be good to see if i tried to do them correctly.
Thanks
This would be tough to do since JavaScript is singlethreaded. The Gif animation consumes that single thread. So you cannot render a page and animate a gif at the same time.
My CMS project has a stylish web 2.0 login screen that fades over the screen using javascript. How come that even though I have made 120% sure that images are preloaded (I used the resource monitor in development tools) they still take a second to show up when my login screen appears. It completely destroys the fanciness! Take a look:
http://www.dahwan.info/Melior (link broken)
When you click login, the screen is supposed to fade to dark using a 75% alpha 1px png image. Even though the image is preloaded, it doesn't show up until after the animation is done. However, if you click cancel and log in again, the animation flows smoothly and perfectly.
Can anyone think of a solution to this problem? I'm having it with the rest of my CMS' GUI as well. It's like there was no image preloading what so ever.
Thanks for answers
EDIT: Ah yes, I'm currently developing this CMS for Google Chrome 5.0.375.99, adding multi browser compatibility later. Sorry for leaving that out
I have come up with a workaround to my problem. I have now tested this in three browsers on two different computers with perfect results. In short, in my image preloading function in javascript, i added each of the images into the DOM in an invisible Div tag.
$('#img_preload').append($('<img />').attr('src', img.src));
The images now being added to the Dom at page load, and according to my theory resting in the memory of my low-end computers, they appears instantly when my CMS needs them.
Thanks for your comments :)
A useful information about this problem:
The Codemonkey solution works because, by putting the images in a hidden div, the browser have to keep those images in memory and ready for a possible change of div's visibility. If the user needs to change de visibility of div from hidden to block, it has to be done instantly. This is why just load all images into an array doesn't work properly.
You could also just preload them into an array. Your problem might be caused by what is known as "garbage collection". This is where the browser looks for objects that are consuming memory which no longer have an instance on the screen and are not being referenced by anything else in memory.
If you preload images into your web age, they should be loaded into the cache, though. So, they should still re-appear when referenced again. However, images can also disappear if the cache expiration is not set for a long enough length of time for these types of files.
Your problem could also be browser-specific.... I have found that it is always best to create an "anchor" for pre-loaded content by placing them into an image array and then using the array to call up the images when needed instead of the image URL(URI).
Here is a quick-and-dirty article that covers this topic.
https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html
The UI thread can only manage one task at a time -- it will either execute javascript or update the UI. If there is a lot of javascript parsing/executing before the code that preloads the image, that might be causing the delay.
Another suggestion is to disable clickability on the login link until after the image has been detected on the page.
To do so is fairly straightforward:
function disableBtn(el){
var btn = document.getElementById(el);
var btnId = btn.id;
btn.disabled = true;
}
To re-enable, set btn.disabled = false (after detecting that your image has been added to the DOM).