/    Sign up×
Community /Pin to ProfileBookmark

Fade slideshow using only webkit css

Copy linkTweet thisAlerts:
Feb 22.2017

Hello.
I have made a slideshow using a fade transition. the problem is it wont work on a pure webkit based browser.

Code: [url]http://pastebin.com/M5Ykx373[/url]
Demo: [url]http://ace-net.net/testing/slide/[/url]

using chome or firefox will work fine but something like safari will lag out quite a bit.

I cant find any other solution for pure webkit based slides with infinite expanding slid numbers.

to post a comment
CSS

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@Kevin2Feb 22.2017 — Seriously? Almost 200 images at ~2.5 megabytes each? That's [B][I][COLOR="#FF0000"]half a gigabyte[/COLOR][/I][/B] that needs to be loaded before anything works. "lag out quite a bit" doesn't even cover it. Optimize your images!! For example, [B]0120703.jpg[/B] is 2560x1600px. Yet you restrict the slideshow to 800px wide:
<div id="page" style="height: 480px; [B][COLOR="#FF0000"]width: 800px;[/COLOR][/B] background-color: #000; position: absolute; top: 0px; left: 0px;">

Why are your images 3 times that width?
Copy linkTweet thisAlerts:
@Kevin2Feb 22.2017 — PS:

Resizing [B]0120703.jpg[/B] to the 800x480 dimensions specified in your HTML reduces a 2.5Mb file to ~68kb. And your users will never see a difference in image quality.
Copy linkTweet thisAlerts:
@AceScottieauthorFeb 22.2017 — PS:

Resizing [B]0120703.jpg[/B] to the 800x480 dimensions specified in your HTML reduces a 2.5Mb file to ~68kb. And your users will never see a difference in image quality.[/QUOTE]

Images are there just for an example and wont be used in the final project. just needed something bigger than 800x480 to make sure auto resizing works and needed a lot of images so grabbed the first zip collection i could find.
Copy linkTweet thisAlerts:
@AceScottieauthorFeb 22.2017 — Images are there just for an example and wont be used in the final project. just needed something bigger than 800x480 to make sure auto resizing works and needed a lot of images so grabbed the first zip collection i could find.[/QUOTE]

P.S this is for a local project, although im using web technologies all data will be on the device so loading times and space limits do not impact the finished results. Images that will be used will be from a smart phone so expecting a couple of hundred images at 1Mb to 5Mb each in size.
Copy linkTweet thisAlerts:
@Kevin2Feb 22.2017 — Images are there just for an example and wont be used in the final project. just needed something bigger than 800x480 to make sure auto resizing works and needed a lot of images so grabbed the first zip collection i could find.[/QUOTE]
You are asking for help. Do not force someone to load a half-gig of data just so they can make a feeble attempt to replicate your issue. In my case that's waiting at least an hour or two. Others here have metered connections and pay for any overages on that connection. Don't make them pay out cash to help you for free.

P.S this is for a local project, although im using web technologies all data will be on the device so loading times and space limits do not impact the finished results. Images that will be used will be from a smart phone so expecting a couple of hundred images at 1Mb to 5Mb each in size.[/QUOTE]
Would have helped if you had stated that up front. But the point stands -- Optimize your images! If in your final project you are still limiting them in your HTML/CSS to 800x480 it makes no sense whatsoever to have images 3 times those dimensions.

Some diagnostics for you to go through:

1) Optimize your images. I don't care where you got them, optimize them to the size they will be presented at.

2) Reduce the number of images to (e.g.) 12. If 12 [B][I]optimized[/I] [/B]images load with no "lag" work your way up from there until you find that point where one extra image causes a lag.
Copy linkTweet thisAlerts:
@AceScottieauthorFeb 22.2017 — Some diagnostics for you to go through:

1) Optimize your images. I don't care where you got them, optimize them to the size they will be presented at.

2) Reduce the number of images to (e.g.) 12. If 12 [B][I]optimized[/I] [/B]images load with no "lag" work your way up from there until you find that point where one extra image causes a lag.[/QUOTE]

Ok reduced it to 8 optimized images.
Copy linkTweet thisAlerts:
@Kevin2Feb 22.2017 — And...? Did anything change?
Copy linkTweet thisAlerts:
@AceScottieauthorFeb 23.2017 — And...? Did anything change?[/QUOTE]

annoyingly it did and now i feel like an idiot ?

Thanks for your help.
Copy linkTweet thisAlerts:
@TrainFeb 23.2017 — Load time is fine now.

See attachment

[canned-message]attachments-removed-during-migration[/canned-message]
Copy linkTweet thisAlerts:
@Kevin2Feb 23.2017 — annoyingly it did and now i feel like an idiot ?

Thanks for your help.[/QUOTE]

When you don't know, you don't know. That's not being an idiot. ? While I may have been a bit harsh in my previous responses it was to hopefully point you in the correct direction of finding a solution.

Good luck on your project!
×

Success!

Help @AceScottie spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.5,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...