Using Something Other Than Preload Image

Question

First, should I be using preload image, or should I be using something else for what I want to do? I'm beginning to think that preload image has nothing to do with what I'm tring to accomplish. What I want to do is, I want to prevent the changeover effect of an image, the flicker that you see.

I have a playbutton, there's no image on the initial screen, when you click on it, an image appears, that's the image that flickers when you first see it.

I tried these 2 codes but they don't seem to be working for me. They don't address the issue.

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>

<img src="https://i.imgur.com/ZjSHH2P.jpg " style="display: none;">

Is there some other code that will work for what I am trying to do? Which is prevent the visual changeover of an image that you see. All help would be greatly appreciated.

To reproduce the changeover effect, do this.

Instructions:

Clear recent history from browser.

Now click.

That's how I've been testing it.

https://jsfiddle.net/a0gapvpj/8/

Example 1:

<br>To reproduce the changeover effect, do this.
<br>
<br>Instructions:
<br>Clear recent history from browser.
<br>Now click.
<br>

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>



<button id="playButton4" style="display:block; width: 266px; height: 266px; cursor: pointer;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, #000000 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton4');
    var player = document.getElementById('player4');
      document.querySelector('#playButton4 .initial').style.display='none';
      document.querySelector('#playButton4 .pause').style.display='none';
      document.querySelector('#playButton4 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .play').style.display='inline-block';
    player.pause();
    }">

  <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

</button>

<audio id="player4" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

Example 2:

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/A445IfJ.png";
    var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/A445IfJ.png";
</script>

<div id="svg-wrapper" style="position: relative;width: 266px;height: 266px;">
<svg width="260" height="260" style="border: 3px solid #0059dd;" viewBox="0 0 260 260">
  <rect x="0" y="0" width="260" height="260" fill="black" />

  <line x1="0" y1="0" x2="100%" y2="100%" 
style="stroke:#0059dd;stroke-width:3" />

  <line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd;stroke-width:3"/>
  
<rect x="105" y="105" width="50" height="50" fill="transparent" />
</svg>

<button id="playButton2" style="position: absolute;top: 134px;left: 134px;transform: translate(-50%, -50%);width:50px; height:50px; border:none; cursor: pointer; background-color:transparent; background-image: url('https://i.imgur.com/A445IfJ.png')" onclick=" 
var player = document.getElementById('player');
player.volume=1.0; 
var button = document.getElementById('playButton2');
if (player.paused) {
    playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/qg4rg7Z.png\')';
playButton2.style.backgroundColor = 'transparent';
    player.play();
  } else {
playButton2.style.backgroundColor = 'transparent';
    playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/A445IfJ.png\')';
    player.pause();
  }">
 </button>

<audio id="player" preload="none" style="display:none;">
<source src='http://hi5.1980s.fm/;' type='audio/mpeg'/>
</audio>

</div>

possible duplicate: https://stackoverflow.com/questions/19396390/load-image-from-javascript - — Deepak Kamat, Oct 13 '17 at 06:26
No it's not..... There's no correlation between the two. Are you able to help me with this? — , Oct 13 '17 at 06:34

score 0 · Answer 1 · answered Oct 13 '17 at 06:37

0

The image is always loaded in the browser for this:

However the problem with the JavaScript code that does the same thing is that you have new Image instead of new Image()

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>

After the image should load in the browser window when this code is run. To make that sure you can take a look into the Chrome Developer tool to see what resources have been loaded in the web page (and its child frames)

As far as I know the image is loading into the browser, however if the changeover effect that you have mentioned isn't working as expected it has to be something else affecting it.

You can check the fiddle here: https://jsfiddle.net/a0gapvpj/7/

<script>
  var preloadImg = new Image();
  preloadImg.src = "https://i.imgur.com/ZjSHH2P.jpg";
</script>

<br> Instructions:

<br> Clear recent history from browser.
<br>
<br> Now click.






<button id="playButton4" style="display:block; width: 266px; height: 266px; cursor: pointer;background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000  174px, #0059dd 174px, #0059dd 177px, #000000 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton4');
    var player = document.getElementById('player4');
      document.querySelector('#playButton4 .initial').style.display='none';
      document.querySelector('#playButton4 .pause').style.display='none';
      document.querySelector('#playButton4 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton4.style.border='3px solid #e77d19';
    playButton4.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'https://i.imgur.com/ZjSHH2P.jpg\')';
    playButton4.style.backgroundRepeat = 'no-repeat';
    playButton4.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton4 .play').style.display='inline-block';
    player.pause();
    }">

  <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z"></path>
  </svg>

</button>

<audio id="player4" style="display:none;">
  <source src='' type='audio/mpeg'></source>
</audio>

answered Oct 13 '17 at 06:37

Deepak Kamat

1,880
4
23
38

Is there perhaps a way to make the transition smoother? – Oct 13 '17 at 06:42
It's still doing the same thing as before. It blinks, it's far from a smooth transition. – Oct 13 '17 at 06:50
Using CSS Animations to add fade effects is the best idea here but the problem is CSS animations / transitions don't work on "background-image" properties. Check this, everything else transitions smoothly except for the background-image - https://jsfiddle.net/a0gapvpj/9/ – Deepak Kamat Oct 13 '17 at 06:50
That's cool, but that seems to only effect the SVG, not the image itself. – Oct 13 '17 at 06:53
I wonder if there are any image transition effects that would work, or could work. – Oct 13 '17 at 06:58
To make the transition possible on the image you have to use a totally different approach, that is to use a `div` element inside of the boxed area and position it with `absolute` to stretch on all sides, then use the `background-image` CSS property to give the background image. After that you can use a smooth transition effect on it when the `div` is shown. – Deepak Kamat Oct 13 '17 at 15:12
Here you go : https://jsfiddle.net/a0gapvpj/11/ I did it for you but that is completely off-topic for this post. Please study the code and try to understand what is happening in it. Most of the basics questions can be searched on StackOverflow and you will find enough information on it. – Deepak Kamat Oct 13 '17 at 15:20
I really don't understand what you did, but it's still doing the same exact thing as before, so it is still not solved. Maybe someone else might have an idea. Thanks for trying. – Oct 13 '17 at 16:51
I removed the script to preload the image, from that fiddle by mistake. Here's the correct one: https://jsfiddle.net/a0gapvpj/12/ – Deepak Kamat Oct 13 '17 at 17:14
I'm seeing this change-over effect when I click on it, this is exactly what I'm trying to remove. https://i.imgur.com/YH5Vuvl.png – Oct 13 '17 at 23:06
What do you consider a "smooth" transition? The image loaded just fine before, you can remove the transition effects and should work as you expect it to. And how were you trying to remove something that wasn't even there before? I added transition recently and before that there were none so how could possibly be removing it? – Deepak Kamat Oct 14 '17 at 05:11
This is the same issue I'm having. https://stackoverflow.com/questions/15315300/how-to-remove-background-image-change-flicker Do you think any of the solutions on there would work with my code? Now do you have a better understanding of what the issue is that I'm talking about? – Oct 14 '17 at 05:22
All of the solutions, you just have to refactor your code according to it. See this https://jsfiddle.net/a0gapvpj/13/ And of course the image would flicker if you have clicked on the button at a point when the page wasn't loaded completely. – Deepak Kamat Oct 14 '17 at 05:41
We've done that already and everything works as expected to me, I don't know what issues are you facing. Maybe make a video of the issue and share it otherwise it will be troublesome for anyone to understand what's going on. – Deepak Kamat Oct 14 '17 at 05:46
How can I create a gif of the issue which lasts milliseconds? – Oct 14 '17 at 05:49
If it's some as small as a millisecond and that it can't be captured in a video /GIF then how is it even an issue? The script for loading the image in your original post is correct and works fine, now the milliseconds it takes to display the image is not a network issue but a compute problem. – Deepak Kamat Oct 14 '17 at 06:28
Can you show me how I can use image sprites? I think this might work. https://stackoverflow.com/a/13286789/8769005 There are other solutions people have posted on there too. Maybe a different one would work better. – Oct 14 '17 at 17:42
But image sprites seems to be the best one. Am I able to use that with my code? – Oct 14 '17 at 17:49
you have to try it yourself first, you are developing something, you have to be deciding what to try or not, I can't say because I am not familiar with your plans or what you are trying to build so. – Deepak Kamat Oct 15 '17 at 04:41

Using Something Other Than Preload Image

1 Answers1

Linked