Comments (5)
You could always put a preloader on you're site: ImageReady is a good one to use.
Alternatively you could delay the loading of your images until after the document is ready, something like this (I found on StackOverflow):
< img src="#" delayedsrc="http://mydomain.com/myimage.png"/ >
Then, add a javascript line when your page loads that does something like this (untested, but you get the idea):
$('img').each(function(){
});
from smooth-div-scroll.
Well, preloader solves the problem only in cosmetical sense. As I said, the loading of all images sometimes takes up to several minutes, and as we deal with not some compiled big piece of content but hundreds of discrete smaller ones, it may be not good to force visitors to sit and watch the preloader moving for 3 minutes instead of giving him the content that already have loaded right away.
Also I tried the approach with a fake attribute but finally gave it up because it's not semantic, the pictures won't be consumed by search engines etc.
from smooth-div-scroll.
Hi!
The problem has been that many users cannot or do not specify the dimensions of the images they put inside the scroller. This has forced me to write the plugin so it will work eventhough no dimensions have been specified. And the only way to calculate the total width of all the (unspecified) images has beed to load them all.
So this is not really a bug but rather a design decision made after having recieved a lot of feedback from users that couldn't or wouldn't specify the image dimensions. The very first version of SmoothDivScroll (or rather its ancestor) relied on widths being specified inline or in the CSS.
Nevertheless I still agree that this can be a problem if you are waiting for lots of images to load.
/Thomas
from smooth-div-scroll.
Yes, I agree with tkahn. But What about responsive designs? In my case, images inside the scroller are height:100% and the width is auto. This is the only way to have a vertical responsive layout. In that case, I need to calculate the whole images width first in js and the pass it to the ul with images.
It is true that adding images a bit big the scroller has some performance issues.
Do you know why does happen this?
from smooth-div-scroll.
I think that adapting the plugin to work with responsive layouts will be a challenge, but an important one. The reason why it's a challenge is that SmoothDivScroll does a lot of calculating - the position of different elements and the position of the mouse pointer inside the scrolling hot spots, width's and height's of elements and so on. In a responsive layout you can still get the numbers but things tend to move around and change much more than on a traditional web page with a more static layout.
/Thomas
from smooth-div-scroll.
Related Issues (20)
- jScrollPane and Smooth Div Scroll
- Click to center image function not working in scroll gallery HOT 1
- How to change horizontal scroll to vertical scroll in Smooth Div Scoll HOT 2
- Responsive Height
- scroll stopping when mouse out from left and right icons
- I've used this as a navbar on mobile devices and it's worked great until recently...
- Wrong setting when using kinetic.js
- Uncaught TypeError: Cannot read property 'show' of undefined HOT 2
- HTML5 Validation Messages Not Displayed
- Enable vertical Page-Scrolling HOT 4
- Can we use this plugin in commercial website? Is it free? Thanks. HOT 1
- pauseOnHover option when autoScrollingMode: "always" is applied HOT 1
- Still cannot click on href on touchscreens HOT 1
- The last div doesn't show up
- When touch scrolling is enabled, links within an individual block aren't clickable
- Auto Scroll Speed when Mouse approaches ARROWS
- jQuery 3 broke plugin... HOT 2
- Uncaught TypeError: $(...).smoothDivScroll is not a function HOT 1
- Uncaught TypeError: $(...).smoothDivScroll is not a function HOT 1
- Can possible to provide React integration example
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from smooth-div-scroll.