Conceal Orbit Slider Images until every single one is fully loaded

While utilizing Foundation 5's Orbit slider, I have encountered a minor issue where the images flash before fully loading into the slider when the page is first loaded. Is there any method to prevent this flashing and only display the images once they are all loaded?

HAML

.row
  .medium-4.large-5.columns
    %ul.example-orbit{"data-orbit" => ""}
      - Cms::File.for_category('founder-carousel').each do |file|
        %li
          .slide= image_tag(file.file.url)
          .orbit-caption= file.description
jquerycssimagezurb-foundationorbit

Answer №1

There is an onReady event in Orbit. You can initially set a default class with visibility:hidden (so it remains hidden but still affects the layout) and then switch it to visibility:visible when it's ready.

$("#myOrbit").on("ready.fndtn.orbit", function(event) {
  ... //your code here
});`

If this doesn't work, you can include onload in the img tags along with a counter. Display Orbit after all images have loaded.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Instructions on utilizing *ngFor for every category I have

Seeking assistance with a specific issue. I currently have four labeled tabs, each containing projects. My goal is to ensure that when I save a project, it remains in the same tab where I initiated the save operation, rather than appearing across all tabs. ...

htmlcssangulartypescript

Seeking guidance on resolving issues with this div table

After almost getting everything set up, I encountered some strange issues that have been difficult to resolve. The challenges I'm facing include: The spacing on the right side is too large. Tables always appear stacked without any spacing in bet ...

htmlcsscss-tables

Working with CodeIgniter and extracting data using an AJAX request

I've been experimenting with this code for a while now and I haven't been able to get it to work. I am working with CodeIgniter framework and when I click the button $('.galName').click(initUpdate);, it calls the following function: fu ...

phpajaxcodeigniterjquery

Error: SyntaxError - Issue with the AJAX request

When attempting to retrieve the HTML of a page using the following ajax request: $.ajax({ type: 'GET', dataType:"jsonp", url: link, success: function(response){console.log(response)}, ...

javascriptjqueryajax

Handling a JSON payload within an ASP.NET MVC controller

When using jQuery post to send a json-object to my asp.net server, I am receiving a string that looks like this: "'{\"refNr\":\"124460\",\"dokid\":1}'" I am struggling to find a method that can extract the data in ...

jqueryasp.net-mvcjson

When attempting to pass `This.id` to PHP using AJAX, it causes an undefined index error when loaded by jQuery

I've been scouring the depths of the internet and various Website Development forums in hopes of finding a solution to my dilemma. Alas, my quest has been fruitless. Behold, the mystical html code: <div id='bottom-right-display'> ...

phpjqueryajax

What is the best method for validating a div element using Angular UI Bootstrap?

When I try to display an array of objects in a view, my issue arises when I place a div element inside the li and ul tags. The challenge now is to validate elements such as "number", "url", and "email" on blur and keyup events. Some elements may be require ...

javascriptjqueryangularjstwitter-bootstraptwitter-bootstrap-3

Utilizing the jQuery autocomplete plugin in a Rails application

I am encountering an issue with the auto complete plugin in my rails application. I have tried setting it up but it doesn't seem to be functioning correctly. Can someone please assist me with this problem? Below is a snippet from the view file: %td. ...

jqueryruby-on-rails-3jquery-pluginsautocomplete

Is it possible to eliminate the input border within React-Bootstrap?

Struggling to remove the input borders of the Form.Control component in React-Bootstrap. Despite searching for answers, nothing has been able to solve this issue. I've attempted redefining the .css classes "input" and "form-control", trying to set th ...

htmlcssbootstrap-4react-bootstrap

What causes a neighboring div to change width when a multi-line span is present?

Here is my React code: <InfoWrapper> <InfoCircle> <span>i</span> </InfoCircle> <span className="info-label"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. elit. </span> </InfoWrap ...

htmlcssreactjsflexbox

Utilizing the Wiktionary API to accurately find synonyms and antonyms

I am currently attempting to utilize the Wiktionary API in order to retrieve both synonyms and antonyms. The responses I am receiving are a bit unclear at the moment. This is the code I have implemented: $(document).ready(function() { var page= $( thi ...

javascriptjquerydbpediamediawiki-apiwiktionary

Separators can be implemented to enhance the visual distinction between arrow icons and text within

Currently, I am working on creating a select menu using Bootstrap 4. I successfully replaced the arrow icon in the select element by changing the background, but now I am facing a challenge in adding a left border to that image. I have tried different meth ...

csstwitter-bootstrapbootstrap-4

Why is it necessary to click my dropdown two times to initiate opening?

I'm currently working on a website using Bootstrap 4.3.1 and I'm facing an issue with getting the dropdown menus to open properly. I have utilized the "dropdown" class within my div. <div class="dropdown" style="float: right;"> <but ...

htmlcssdrop-down-menubootstrap-4

Is it possible to combine two images using the PHP GD library and obtain a JSON output as the end product?

I have successfully implemented the UI Logic for my Web App, which I discovered on a specific URL. However, I am now facing challenges with the Backend Logic responsible for generating Merged images (Cropped Image and placeholder image) and displaying them ...

phpajaximagemergegd

Which IDE is best for JavaScript development on Ubuntu 11.04?

After years of developing and debugging Javascript on Windows using Visual Studio, I recently made the switch to Ubuntu. However, I'm finding it difficult to adjust to the default editors like vim and gedit. Can anyone recommend an IDE for me to use o ...

javascriptjqueryubuntuide

Tips for accessing the ID, Name and Class of a specific DIV element with the class "Extreme" upon clicking a button

Need help finding the ID of the outermost parent div <div class="panel" id="Kudapanel"> //Top-level Div <div class="Kudapanel1" id="Kudapanel1"> </div> <div> <div> <input type="button" id="yo ...

javascriptjqueryhtmlcss

Deleting data using the Ajax method in a Spring Boot application

Despite my efforts to find a solution by researching various forums discussing the same issue, I am still unable to resolve the error message 'Request method 'DELETE' not supported'. An Ajax call is triggered when a user on the client- ...

jqueryajaxspring

Discover the trick to capturing the back button and dynamically refreshing the webpage with ajax!

I am currently facing an issue with a dynamically updating web page where I need the browser's "back" button to trigger a function for refreshing data instead of navigating back a page. I have managed to trap the "back" button using the following code ...

javascriptjqueryajax

problem with LinkedList implementation in javascript

I have been working on implementing a linked list data structure in JavaScript. Currently, I am facing an issue with inserting a new node at a specific position in the list. The code snippet below shows my implementation: var node3 = { data: 4, ne ...

javascriptjquery

Downloading files is restricted to only .txt, .log, and .svg formats, while encountering issues with downloading .xlsx, .xls, .gif

I'm currently working on a project in Struts 2.5 where users can download files they upload using AJAX. So far, it's successfully functioning for .txt, .log, .rtf, and .svg file types. However, there seems to be an issue with downloading files l ...

javascriptjqueryajaxstruts