0

I'm building a small site that displays images and sound based on a slider. It loads the images to the carousel (I'm using Slick). But I'm running into an issue with Chrome and only Chrome. Once I move the slider, new images don't load in the carousel unless I scroll with the slider a few times. I've tested it locally, and I uploaded everything to my server to try it. I got a friend to try it out and it didn't work for him, either.

Here's the site. Warning that it's a pretty heavy load, so I wouldn't open it on mobile: http://kschenk.com/whyte-night.

Nothing comes up in the console, and I don't have any plugins installed. The only hint I get that something is broken is that Chrome keeps spinning and "Processing Request." It works in Safari, Firefox, and even Internet Explorer.

I'm open to any help and can provide any info necessary.

Some stuff that might be useful:

  • each increment in the slider loads a ~5Mb audio file, streamed using html5 audio tags
  • each increment in the slider removes the images from the carousel and adds 10 new ones at about 1-2Mb each, which are lazy-loaded
  • I've tried two different sliders now, this one (Slick) and Owl Carousel. The issue was there for both.

Thank you!

  • it looks like your this file is empty??? `http://kschenk.com/whyte-night/slick/slick.css.map` so replacing this map, might useful – Manjunath Siddappa Nov 20 '14 at 04:50
  • The map opens fine for me. It's part of the slick carousel package, so that shouldn't be affecting this issue since I had it before implementing slick. –  Nov 20 '14 at 04:58
  • Initially the request for this file was pending with 0KB. after sometime it was loaded and image too. so i feel this file only creates the problem. – Manjunath Siddappa Nov 20 '14 at 05:02
  • Possible duplicate of [How to solve Chrome's 6 connection limit when using xhr polling](https://stackoverflow.com/questions/32697909/how-to-solve-chromes-6-connection-limit-when-using-xhr-polling) – kenorb Oct 22 '17 at 22:26

3 Answers3

1

Alright, I figured it out! Figured I'll post the answer in case someone else finds this topic in the future (I hate unanswered questions as much as you, future solution seeker).

So Google Chrome allows max 6 connections per server. Apparently most other browsers, do, too, but some of them don't respect it. That's why it worked in Safari and Firefox. I was loading many image and audio files, so it would hang when I tried to stream all my audio. Something would mess up.

I solved it partly by putting my images on a subdomain. But then only 6 of 8 of my audio files loaded. I found out from Googling around that the 6 connections per server also counts subdomains as a separate server. That's why putting my images on one helped. But I still needed to get my audio files!

So I made two new subdomains, "audio" and "audio2". I put 4 of my audio files on each and load them like I did before, just changing the subdomain depending on the file I'm looking for. It works, because now I only have 4 connections open per server.

I guess it works slightly differently with audio streaming through the HTML5 audio tags. Since not a lot of people use audio on their sites, there's not that many topics on this online.

  • Note that I now think this is an incredibly hacky solution. I haven't taken the time to fix this yet because it's not that important, but I do plan on doing so in the future. –  Nov 28 '15 at 17:59
0

Your Image is Showing Right, if your chrome is not responding, so then reset your chrome browser and check it out...

Manohar Kumar
  • 605
  • 9
  • 12
0

you might also consider to make the images a bit smaller: if you choose save for web in photoshop you get down from 1.2MB to 360KB... does the image really need to be 1800x1195px? You might choose a smaller image-version based on browser-window-sizes: good for the user and good for your server :-)

kilian
  • 29
  • 4