on my page i have a tree view which is loading nodes asynchronously before expanding. I can't figure out how to display standard "loading" gif while waiting for node to load. I understand that it's standard behavior, but it simply wont work. Probably it's some css issue..
My page references css like this:
<link href="Scripts/app/ext-4/resources/ext-theme-classic/ext-theme-classic-all-debug.css" rel="stylesheet" />
I know it's there because everything else is rendered correctly. In that css file is this class:
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
I'm certain that this class is used because if i put background-color: #ff0000; instead of background-image: url('images/tree/loading.gif');, the place where icon should appear gets red background. I understand that icon url should be set relative to css location, and it is. This is part of my file structure:
Scripts
app
ext-4
resources
ext-theme-classic
images
tree
loading.gif
ext-theme-classic-all-debug.css
Also, when i call that icon directly using img tag like this:
<img src="Scripts/app/ext-4/resources/ext-theme-classic/images/tree/loading.gif" />
loading icon is shown as expected.
Any ideas are much appreciated! Thanks!
EDIT: RESOLVED
I was able to figure out what was the problem. Since i was using custom icons for tree nodes (sorry for not mentioning that, i didn't think that was relevant), loading.gif was somehow showing underneath those icons. To resolve that, i changed
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif');
}
to
.x-grid-tree-loading .x-tree-icon {
background-image: url('images/tree/loading.gif') !important;
}
Related
I'm currently developing a complex print style sheet which is in some ways different from the HTML currently displayed on screen. I've hit a hurdle with a balance between performance and achieving the desired layout.
Basically there is a gallery of images which are loaded via javascript on the fly. Images are built dynamically via JS and output to the DOM on each request for the next image.
My problem lies in that I need to build this for printing purposes. I think I'm left with a scenario where I will have to build additional html on the page just for the print page to look correct; that isn't so much of a problem, except the images are rather big, and even using "display:none" and media print { display:block; } won't prevent the images from being downloaded on desktop devices behind the scenes by the browser. In essence I need them to stay dormont on screens, and come to life using print styles.
I had considered using the css background-image property - which I believe doesn't cause the image to load in the browser, however background image doesn't seem to reliably print across different browsers.
I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.
Can anyone suggest any sort of solution for this? at the moment it seems like I'm going to have to suck up the additional overhead of all the images to achieve reliable results.
If background images are an option, you could prevent the download of those when setting the parent element of the image container to display: none
Example HTML:
<div class="invisible">
<div class="img-container">
</div>
</div>
Related CSS:
.invisible {
display: none;
}
.img-container {
background: url(img.xyz);
}
#media print {
.invisible {
display: block;
}
}
Apart from that a similar question had been asked: Prevent images from loading
May be that will help you, if background images are definitely NOT an option.
I've come to believe that there's two things happening. Firstly, if you want to preload a url, you can do this:
body:after{
content: url(http://www.example.com/img/img_1.png) display:none;
}
But as far as I know, this doesn't help in this case:
body:after{
content: url(../img/img_1.png) display:none;
}
In this latter case, the image is already local, so it doesn't have to "download" it? Is that true? Or will the first bit of code cache the image even more?
I ask, because even though I do this, and I then transition to another page, using jquery mobile, the next page still takes a few seconds to load the background image. Even though it's a local asset.
How do I get around this?
From the tests I've done, it seems that two things can cause a delay when loading an image:
When the image needs to be loaded from a URL, or
When the image is locally located, but needs to be placed on the display screen
What i didn't realise is that with PhoneGap, even with the images local, it might take a little while to load. This is what was causing issues for me. Well, this and the fact that I was loading from URLs. So in my case I used the "CSS3 Caching Plugin" like so:
jQuery(function($) {
$.preload.images(document)
});
This solved my problem of loading images that was in the CSS file. But then for my own convenience, I added a section to the css file for locally cached files. Like so:
#cacheMe1 { background: #ffffff url('../img/img1.png') 50% 50% repeat-x; }
#cacheMe2 { background: #ffffff url('../img/img2.png') 50% 50% repeat-x; }
#cacheMe3 { background: #ffffff url('../img/img3.png') 50% 50% repeat-x; }
#cacheMe4 { background: #ffffff url('../img/img4.png') 50% 50% repeat-x; }
etc
This solved caching for most images, plus it allowed me to still keep URLs as loading in the app (i have a gallery section where its currently acceptable to see the images load, rather than on display).
What I also did that seems to be working, is that I use the "InAppBrowser" plugin to preload entire pages by opening them in a hidden window:
var ref = window.open('http://www.example.com', '_blank', 'hidden=yes');
If you open a bunch of files on load of the app, it seems when you either open these URLs again, or switch to the window with:
ref.show();
So there's two decent ways I've found to cache files that works perfectly for my scenario. Hope it helps someone else!
I do not know if I understood well, but maybe it can useful for you:
<img src="my.png" onerror="this.src = 'image-not-found.png';" />
When I was facing problems with preloading images I had to abandon an idea of using display:none; cause it didn't work properly (as long as I remember the browser refuses to load content of invisible elements in order to speed page load up and reducing the traffic). Instead I created a div that in browser's opinion was visible, but it had zero width and height. Required images I load as background-image for this block. The whole trick is that background-image property can take multiple values. The CSS will look like this:
#preload {
height: 0;
width: 0;
background-image: url(image-1.png), url(image-2.png);
}
So you don't get mess in the markup. Hope this trick will work in your case.
You don't need to attach the image to the DOM directly, therefor there is no need to use css to hide it. Use JavaScript to preload images.
var image = new Image();
image.src = "yourfile.jpg"
you can then provide a longer term solution using appcache.
I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
I am working on an app using Bootstrap as the framework in Rails (bootstrap-sass). What I want to do is add a sweet background image but I can't seem to override the white background of the body no matter what I try.
Has anyone had success with this? What do I have to change or add to get this to happen?
In addition to trying other things, I have even tried wrapping all the contents in the body in a div with an id, then calling that class in the custom css.scss file where I have successfully customized other aspects of Bootstrap.
The code I added using the id:
html body #bgimage {
background-image: image-url('/images/cityscape.jpg');
}
Edit:
I just checked the errors in the development local server and I have this: ActionController::RoutingError (No route matches [GET] "/assets/images/cityscape.jpg"):
/Edit
Thanks!
There was a similar discusion recently, the problem was that background-image oddly does not work with bootstrap. Try:
html body #bgimage {
background: url('cityscape.jpg');
}
Notice, that asset-pipeline does its work for finding the proper location of your file, so you don't have to mention the path.
If your cityscape.png is in assets/images/ directory, please use the following:
html body #bgimage {
background-image: url(image_path('cityscape.jpg'));
}
And to use your original source, you have to remove /images/ from your image-url as:
html body #bgimage {
background-image: image-url('cityscape.jpg');
}
So I'm running a social network site, in which I've installed plugins and modules that allow users to edit their fan pages by having their own CSS editor ( a style box ) This is for Social engine.
I originally had a main menu that had images for links but were referenced via html src vs css
i.e <img src=""> vs .div { code } in order to allow users to alter the layout via CSS I created classes for each image so that they could be overwritten.
For this I stumbled across an article ( I don't have the link ) on stackoverflow bringing up how to change an image using CSS which lead me to the <img class=""/> and using
.customtag {
content:url("http://pathtoimage"); }
in order to modify it.
It shows up GREAT in chrome and IE, but in Firefox it is simply not registering and all I see is the text + the description for the alt="" tags.
I've been searching for a few hours but unable to find an exact match to this. So I'm posting this here to see if anyone could lead me in the correct direction. I've also tried declaring the !DOCTYPE as well as using <style> vs <style type="text/css">
While using the css validator shows other areas, nothing related to the current lines of code as to why its not rendering. In firebug it doesn't even show the CSS registering at all it seems.
Any help is greatly appreciated.
http://fmlstudios.com/testdesign/
I've removed the menu code from my site and put it into a separate html file in the link above as to single out my issue. Any help is greatly appreciate and or pointing me in the correct direction. Thank you for taking the time to read.
Since Firefox doesn't understand or comprehend the content: url(); fully as it expects an image from the <img class=""/> you'll need to utilize background: url(); instead as this is accepted in all browsers.
I.e.
.someimageclass { background: url(pathtoimage); }
`
This will cause firefox to load a an image but it will have a black border box around it due to the fact it's looking for the original image specificed in <img class=""/>"
To make a workaround create or google a "blank.gif" 1x by 1px and edit the img class to
<img class="someimageclass" alt="" src="blank.gif"/>
Now the box will dissapear and this will be your workaround.
Hope this helps anyone else out there that's been going nuts over this.