Comments (5)
Hi there Zach--
What are you using to load the images (and remove the loading.gif once the image is loaded)?
from flexisel.
I guess im not certain exactly what you mean.
I have the html flexisel div followed by my unordered list and thats basically it. If you are referring to scripts, I have a preloader script that calls the .gif on loading images while they download.
This is the preloader script:
// JavaScript Document
jQuery(function(){
jQuery("#content img").wrap("<div />");
});
$.fn.preloader = function(options){
var defaults = {
delay:200,
check_timer:300,
ondone:function(){ },
oneachload:function(image){ },
fadein:500
};
// variables declaration and precaching images and parent container
var options = $.extend(defaults, options),
root = $(this) , images = root.find("img").css({"visibility":"hidden",opacity:0}) , timer , counter = 0, i=0 , checkFlag = [] , delaySum = options.delay ,
init = function(){
timer = setInterval(function(){
if(counter>=checkFlag.length)
{
clearInterval(timer);
options.ondone();
return;
}
for(i=0;i<images.length;i++)
{
if(images[i].complete==true)
{
if(checkFlag[i]==false)
{
checkFlag[i] = true;
options.oneachload(images[i]);
counter++;
delaySum = delaySum + options.delay;
}
$(images[i]).css("visibility","visible").delay(delaySum).animate({opacity:1},options.fadein,
function(){ $(this).parent().removeClass("preloader"); });
}
}
},options.check_timer)
} ;
images.each(function(){
if($(this).parent(options.preload_parent).length==0)
$(this).wrap("<div class='preloader' />");
else
$(this).parent().addClass("preloader");
checkFlag[i++] = false;
});
images = $.makeArray(images);
var icon = jQuery("<img />",{
id : 'loadingicon' ,
src : '../img/loader.gif'
}).hide().appendTo("body");
timer = setInterval(function(){
if(icon[0].complete==true)
{
clearInterval(timer);
init();
icon.remove();
return;
}
},100);
}
from flexisel.
The big issue is that the "preloader" class is not getting removed on the cloned items. It's kind of up to the preloader script to find those items. As far as I can tell, I don't really know what I could change in the plugin code to affect the behavior of something that is acting on it externally. But there are few things I could suggest trying...
- Perhaps look at changing the timing of when the events are called. Flexisel is called on the window.load event which occurs after the document.ready event. This could be a potential source of issues occurring.
- In the Flexisel code, the point at which everything in the carousel is initialized is in the initalizeItems() method. You could try calling something in your script loader at the end of that method, or pass in a callback function in the options.
- There is also a clone: false; option that you can pass in (see docs). Since the cloned items seem to be the source of the problem, you could just try not cloning them.
Take a look at some of those and see if any of those work for you.
from flexisel.
Is there a way to repeat the images loaded into Flexisel without running that Clone Option ?
from flexisel.
Not currently. However at the end of the scrollLeft and the scrollRight methods you can see where the reordering of items occurs to create the infinite scroll when clone is true. You could probably just modify that for the non-cloned implementation.
from flexisel.
Related Issues (20)
- - increment margin between items HOT 2
- Multiple calls on window resize HOT 4
- Element order when set infinitely:true HOT 4
- Slides. second item overlaps with previous and next one HOT 2
- Need to trigger methods.scroll(true); from page on mouseover event. HOT 1
- Dynamic Data Binding HOT 1
- visibleItem:1 is not working properly HOT 2
- Can this flexisel compatible with ie8 HOT 2
- Can we turn off slider on small widths HOT 3
- swipe is left or right? HOT 1
- Event Propagation HOT 1
- How to disable touch swipe HOT 1
- When autoplay is enabled, DOM gets bombarded with duplicate clones. HOT 3
- How install in angualr js..? HOT 2
- Disable next button condition HOT 1
- Add bullets pagination HOT 1
- Needs a up/down carousal animation HOT 1
- Pause Slider until it's visible in the viewport
- For many picture norounded value problem solved liked below
- Not working with latest jquery version 3.x HOT 1
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 flexisel.