Ask a Question

css image background not loaded by firefox

0 votes
by (230 points)

Hi,

I made a very long story with a lot of images (100 more or less) with sugarcube.

I thought it would be smarter to affect each image to their passages by using tags. So for each place and character of my story I created a CCS class with a specific image as background, so I just had to add a tag to a passage to have the image displayed.

It was really nice and convenient, until I realised that when the story isnt played from local source, some browser (safari and firefox for example) don't manage to load every image. The first ones appear right, but after a few passages no one appears. Is there some kind of limited file amont in CSS for some browser ? Did someone had this issue before ?

For those interested, here is an exemple of the CSS

.thatplace {
  background: url("images/thatplace.gif") no-repeat center center;
  height: 100vh;
}

 

1 Answer

0 votes
by (159k points)

While the external file caching area of your web-browser does have a maximum limit, that limit is set quite high.
(the actual limit is set by the developers of the web-browser in question, this article explains this in more detail)

I don't know the answer to your question, and without access to your project and it's external media it would be difficult to debug the issue. I did however notice some portentual issues with your example.

When you add a Passage Tag (like thatplace) to a passage and that passage is viewed within the generated story HTML, the story format's engine will assign that tag to a number of HTML elements that make up the current page.

1. It gets assign to the data-tags attribute of the following elements:

<html data-tags="thatplace">

<body data-tags="thatplace" ...>

<div id="..." data-passage="..." data-tags="thatplace" class="passage ...">
	<!-- ... the contents of the current passage. -->
</div>


2. It gets assign to the class attribute of the following elements:

<body ... class="thatplace">

<div id="..." data-passage="..." ... class="passage thatplace">
	<!-- ... the contents of the current passage. -->
</div>

note: Some developers consider the old technique of using the CSS class attribute (like the above thatplace example is) to indicate behaviour as an out-dated practice, which is why SugarCube also supports the newer data-XXXX attribute technique as well and why ideally your CSS selectors should target the data-tags attribute instead of the class attribute if the Passsage Tag is being used to represent behaviour instead of just styling.

So when you use a CSS selector like the one your example it is actually being applied to both the body elements as well as the div.passage element, which isn't ideal. You can over come this issue by making your CSS selectors more specific.

(I will assume that you want the images to target the body element, instead of the div.passage element.)

body.thatplace {
	background: url("images/thatplace.gif") no-repeat center center;
	height: 100vh;
}

 

by (230 points)
Thanks for your response ! It is very instructive, I will modify my CSS, but what about my storage limit issue ?

Is there a way to load the images only when they are displayed ?
by (159k points)
As far as I am aware Images referenced within a specific CSS rule are first 'loaded' (into memory) when the that rule is first applied to an element. If the referenced image is externally hosted and not currently cached by the web-browser then this is also the moment when the image is first downloaded.

I used the terms 'first loaded' and 'first downloaded' in the above because the web-browser may decide to unload the image from memory) or delete the image from the cache whenever it feels a need to cleanup after itself, which can occur while your story is running. This would cause the image to be re-downloaded or re-loaded when it is next needed.
Snow Theme by Q2A Market
Powered by Question2Answer
...