Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
rdreed

Logo loading screen - code adjustment please

Question

Hi everyone, 

I bought a plugin from Squarestud.io and it appears that they dont respond to anyone's emails/facebook/instagram - I assume they have gone bust. Anyway, I need to tweak the plugin and I am not very good at .js and would appreciate some help. 

The plugin is a logo loading screen using the site's logo.  I am wanting to replace the image source (the existing site logo) with a gif that is stored in the site's CSS stored files - URL below.

Any help is really really really appreciated.

Thank you, 

Rob 
working site: https://pepper-clarinet-ctnt.squarespace.com/

GIF: 

https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif


Code Injection: 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<script>
$(function() {
  var loadLogo = $('header').find('img').attr('src');
  $('.logoload').css('background-image', 'url(' + loadLogo + ')');
});
</script>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

 

Share this post


Link to post

4 answers to this question

Recommended Posts

  • 0

@rdreed Your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="logoload"></div>
<style>
.logoload {
  /* SET BACKGROUND COLOR */
  background-color: #fff;
  /* SET BACKGROUND SIZE */
  background-size: 90px;
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("https://static1.squarespace.com/static/5d9db9630e0cb109b5331185/t/5db877bc05d8093cb6fbfe15/1572370384602/mrnice-smiley.gif");
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $(".logoload").delay(500).fadeOut("slow");
})
</script>

 

Share this post


Link to post
  • 0

@tuanphan You've already helped me massively, I was wondering If I could ask for your expertise again? Do you think it is possible for this loading page animation to only run when landing on the homepage and (like presently) not when landing on every page? 

Share this post


Link to post
  • 0

@rdreed Try

Style & Script code: Page Settings > Advanced > Insert the code to Header

And insert this code to bottom of page (you can use Markdown Block or Code Block to insert)

<div class="logoload"></div>
Edited by tuanphan

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...