I have created a website that has expand-collapse icons. In my localhost, it works fine. however, once online, the images are not displayed in mozilla (displayed in IE). in my image sources, I have used absolute links src="http://example/icons/expand.png" instead of relative src="/icons/expand.png. I do not understand why images are not displayed in mozilla.
I do not know if using absolute links for images sources is a good practice, so I need your help.
Usually, is best practice to use relative links, because you can resize and minimize the images to let users load the page faster. You can use softwares like Gimp or Photoshop to minimize them and then upload to your online space.
Hope to help you :)
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.
I have a website i'm designing right now, and i'm new to using JQuery. I'm noticing on my slick-carousel slider that the slides and styles adjust them self's while the user is loading the page for the first time in the browser. I have a few media-queries in place for different resolutions, and it seems that it has to adjust.
Is this because of the way i wrote the code, or is this something that happens with Javascript? What's the best practice to avoid this?
Here is the site link - Advanced Litho Website Re-design
Look at this URL: https://gtmetrix.com/reports/www.advancedlitho.com/aCuNhAl7
Here you can see that your images are huge in size. GTMetrix is showing that scaling your images properly can give you a boost of 1.9MB
Do whatever is said on the test and you should be fine.
I made all the webpages in html5, css and js and used google chrome to see the result.
When I change the pc for example, the structure of the webpage changes completely...
I think it has something to do with position relative and absolute but not sure...
Here it is sample fiddle, the webpage for now is just 5 images that I can navigate with 4 keys from keyboard,
sorry for my english...
Can anyone help me?
Are the screens different 'sizes'. Check the resolution of the displays. That's most likely your issue.
It sounds like you're positioning your elements based on the size of your screen. This would be fine if everyone had your screen.
If you could provide your code, I could further assist on how to remedy your situation.
In the meantime, try reading more into css positioning: http://css-tricks.com/almanac/properties/p/position/
The logo image for my site appears after the page is loaded.
Because of the way the image was designed to fit into the context of the page, it leaves a gaping hole in the appearance of the page.
Is there a workaround for this maybe using JavaScript or jQuery?
You'll need to explain better, but you might consider some of the following options:
Compress your image better
Find a better webhost if bandwidth
is a bottleneck
Preloading wont help probably in
this situation, if however you are using multiple images preloading will help
Consider a placeholder image/div
that lies underneath the logo (IE.
please wait, logo loading, and the
logo loads ontop with a higher
z-index)
Consider a new page design if it is too resource intensive
Have a please wait loading message, this is probably going to put off your visitors though
If you provide a link to your website we can help more, the problem is too general to give and specifics.