网站上的图片需要一段时间才能加载

Question

I've literally just wrote the same post a couple of minutes ago. The whole thing was so lazy and poorly written I'm re posting the question. Apologies for the first post.

Here is my website:

top-drawer.net/artists.html

When I use a browser that isn't my own it's very noticeable how long the pictures take to load in. I'm talking about the artists page and the individual artist own pages. When you click on the pages you watch the images slowly load in and when you are showing someone new the website it really doesn't look professional at all.

What is causing this and how do I go about fixing it??

just for information I'm using google chrome to view my work.

Answer 1

It takes a little long because there is a script which change the opacity of the img element from zero to 100%, that is why you cannot see them immediately. Try to change it from:

$('#slider').backstretch([
  "/../images/bennyPalmer/2.jpg"
  , "/../images/bennyPalmer/8.jpg"
  , "/../images/bennyPalmer/3.jpg"
], {duration: 3000, fade: 750});

to:

$('#slider').backstretch([
  "/../images/bennyPalmer/2.jpg"
  , "/../images/bennyPalmer/8.jpg"
  , "/../images/bennyPalmer/3.jpg"
], {duration: 3000, fade: 750, fadeFirstImage: false});

Note that you need the last version of the repository. Here the reference: https://github.com/srobbin/jquery-backstretch/pull/345

Answer 2

Your images take so long to load (in the Artists page) because they are big files. Try creating thumbnails of the large images