I have a simple html page with an image gallery. Sometimes not all the images will load. To me it seems to be random, never the same images. When the images do not load I refresh the page and they load instantly, it is usually only one or two images per page. Here is the website link.
http://www.kayleighwhite.org/engagements-sweethearts-017#gallery
This is the html for the images
<div class="gallery_one" style="background-image: url(images/portfolio/engagements-sweethearts/0168.JPG); background-repeat:no-repeat; background-position:center;">
<img src="images/portfolio/portfolio.gif" width="960" height="639" class="gal" alt="gallery">
</div>
The css
.gallery_one {
margin-left:auto;
margin-right:auto;
}
.gal {
display:block;
margin-left:auto;
margin-right:auto;
}
The image not loading is the background image. The portfolio.gif is just a transparent image that is layered over the top. Like I said though this is just random.
I'm not saying that 0168.JPG is not loading, cause tonight it is. But if you just keep clicking the "next" link eventually there will be a page that does not load all the images. I know that this is hard to determine the cause, but does anyone see anything wrong with this html or css that could cause this problem? Or any knowledge of such problems?
By the way I tested this on firefox and chrome on two different computers, both running windows 7. Same random results.
Related
I have this JPG image that I am trying to use in CSS as a background-image for a div container. All different images I have tried work, but this one just wont render in the viewport. If I go to inspect element, it shows the thumbnail when I hover over the elements URL.
I have tried everything including:
Putting it in an img tag and giving it a static height/width
Converting it to png and svg'
Compressing it
Scraping the metadata
Using it in a different HTML/CSS file
import image from "./image.jpg";
//using React.js
<img src={image} className="image"/>//<-- doesnt work in img as src
<div className="imageBg"></div> //<-- doesnt work in div as bg
.image {
height: 100px;
width: 100px;
}
.imageBg {
height: 100px;
width: 100px;
background-image: url("./image.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Here's the culprit: (its just a 2000x2000 729KB .jpg mockup image edited in photoshop)
Is there something wrong with this image?
If you guys dont believe me, heres the bug in action: codesandbox.io/s/hardcore-kare-212iuy?file=/src/App.js
It works fine when I open that in an incognito window, but if I open it in a regular window…
… the file name in your live example (although not in the code you included in the question) ends in ad0.jpg which is a naming convention that triggers common ad-blocking algorithms.
Don't call it that.
Moral of the story: If an image isn't loading then look at the Network tab of your browser to find out what happens when the browser tries to load it.
There is a high chance of the Image getting Corrupted, try doing a small edit in any editing software (photoshop, or even system default apps) and save it again and try using it!
You can also simply take a screenshot of it and try using it in your code
If that doesn't work, you can use this link https://i.stack.imgur.com/LGYHM.jpg in your src as a string, this is the image uploaded to Stackoverflow's drive and test it for time being! if that works as a permanent solution create an account and Try Uploading it to a Cloud Assert Provider like Cloudinary and add it as a Link in the src
I've tried several times and several ways, but can't figure this out. The below set of images load perfectly in non-firefox browsers, but ALL of them are invisible in firefox. If I bring up the document inspector and hover the mouse over the url, the images pop up for only google and email (which are the only two that don't have that weird class on them).
So I guess the question is: why is firefox adding a weird class to my images (just these, all others on the page work fine) and why don't any of them show up in this area?
<div id="share_icons">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/facebook.png" id="share_facebook">
<img src="http://localhost:80/graphics/share/google.png" id="share_google">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/pinterest.png" id="share_pinterest">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/tumblr.png" id="share_tumblr">
<img class="gknwrycuvfcesykaisun" src="http://localhost:80/graphics/share/twitter.png" id="share_twitter">
<img src="http://localhost:80/graphics/share/email.png" id="share_email" pop="Send a link to this list to friends via e-mail. <b>Note:</b> recipients must already be users of the site or your view settings must allow public views for them to see it!">
</div>
Here is the calculated CSS of the #share_icons area:
#share_icons {
width: 150px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
* {
border: 0px none;
margin: 0px;
padding: 0px;
font: inherit;
vertical-align: baseline;
-moz-box-sizing: border-box;
}
Another thing I noticed, when I click on any of the images in this area, the pop up box for the inspector which usually hovers over the element where it is on the page is at the top left of the screen as if the images are all off screen somewhere.
Already tried clearing the cache completely. Also tried manually loading the image urls in Firefox and the images load and display fine if I do this. I've also moved the image tags to other places on the page to make sure this isn't a nested CSS thing.
Sorry to jump in so quickly, but I noticed something odd and FINALLY discovered the reason. Adblock was blocking the images most likely because I had accidentally clicked it and filtered it out.
I'll leave this question because it may be helpful to others.
Disable AdBlock for that current page you load. Image gets displayed after refresh. I just tried it and it is working.
I'm really stressed about this, it's all of a sudden started to happen. It's a WordPress site, so excuse the logo of the site not working and so on... this is just one page saved as HTML.
Link: http://bit.ly/1n7maKZ
For some reason, if I leave a page open for a certain amount of time, or click on a link and then go back to it, the backup background color will kick in suddenly and the background image will disappear! I have no idea why. I'm using Chrome.
My code in the header looks like this:
<div id="background" class="background-size grayscale bg"></div>
Here is the CSS:
#background {
background: url("[WORKING LINK HERE]") no-repeat center center fixed #e1e1e1;
background-size: cover;
}
And...
.bg , #supersized {
top:0;
width:100%;
height:100%;
position:fixed;
z-index:-20;
}
Is there a way to prevent this? The annoying thing is, you probably won't get to see the issue because I have no idea what triggers it to suddenly drop the background image and resort to the alternate color. If I have a page open long enough in Chrome at least, it does it. Thank you for any help!
Your "WORKING LINK HERE" is not working at all. I tried to load the background.png file, but it doesn't exist and, after a while, the server gives you back the website's homepage.
Probably you sometime see the background because it is cached in your browser.
Fix the path/filename of you background image in your css and it will work.
I have a gallery in my website. The gallery contains 15 images, each one of them is approximately 500KB (total size is 7.5MB).
Because the gallery takes a while to load (25 seconds on my computer, tough it depends on the connection), I want the visitor to know the gallery is loading, hence the Ajax loading GIF.
I want the visitor to see the loading GIF as soon as he enters the gallery page, until the the gallery images have been downloaded and are ready to be viewed.
In order to achieve my goal, this is what I've done:
This is the beginning of the body of the gallery HTML page:
<body>
<img src="images/ajax-loader.gif" alt="" class="hiddenPic" />
<!-- loading Ajax loading GIF before all the other images -->
And this is the gallery CSS part:
#gallery {
background: url(images/ajax-loader.gif);
background-repeat:no-repeat;
background-attachment: fixed;
background-position: center;
So basically, the loading GIF should be downloaded as soon as a visitor enters the gallery page, because it is the first object inside the <body> that is going to be downloaded. However, it's not visible due to the hiddenPic class.
This method should help making the loading GIF ready and visible as the gallery background as soon as possible, until all the gallery images have been downloaded and the gallery is ready.
However, the loading GIF doesn't work properly on Google Chrome; it works perfect fine on Firefox & IE (spinning flawlessly) - but gets stuck (doesn't spin properly) on Chrome, from the moment it appears until the gallery is ready.
Update: I know I can implement a better gallery (like the ones suggested in the comments) which would require less resources from the user when entering the gallery page - but I don't understand how this can be the cause for the problem when the GIF loader works perfectly on Firefox & IE.
Why doesn't the Ajax loading GIF work properly on Chrome?
You just need to delete this declaration on line 602:
background-attachment: fixed;
I also had the same problem. The way I fixed it was to put the loading gif in it's own element (to keep markup clean, use a pseudo element).
Now, instead of using the background-attachment rule, you can use position: fixed. Here's the code you should use (assuming you'd like that loader gif to sit right in the middle of the screen):
#gallery:after {
content: "";
background: url(images/ajax-loader.gif);
position: fixed;
top: 50%;
left: 50%;
width: 50px; /*change to the width of your image*/
height: 50px; /*change to the height of your image*/
margin-left: -25px; /*Make this 1/2 the width of your image */
margin-top: -25px; /*Make this 1/2 the height of your image */
}
Hope this helps!
I'm a strong advocate of using dataURI with base64-encoded images in this and similar situations. What it does is effectively eliminates the need for a separate http request to retrieve the spinner gif, meaning the "loading" animation is immediately available to be rendered. This makes the value of the UX improvement so more valuable than a couple extra kilobytes in overhead - especially since the stylesheet would be only downloaded once and then cached by the client.
This fiddle has the animation embedded from ajaxload.info, having added literally less than 1KB to the final CSS.
Note that this kind of resource embedding is not supported at all on IE7 (but IE7 users have much bigger concerns to address :)
You may try this using jQuery BlockUI Plugin (v2)
Hope this helps.
Personally for loaders i've always done it this way , I do not remember where i read it .. But its always worked for me ..
$(function(){
$('#overlay')
.hide()
.ajaxStart(function() {
$(this).css("display","inline");
})
.ajaxStop(function() {
$(this).hide();
});
});
What it does , is it takes the div with an id of overlay and on any AJAX request that goes out , makes it visible and once the ajax request is complete , it hides it out.
Let me know if u need more code.
Cheers.
In the CSS for #gallery
background-position: center;
Should be
background-position: center center;
You should also try to use jQuery. See http://yulounge.alienworkers.com/photogallery/ for an example.
On one of my HTML pages there are some large images that are shown when I mouse hover over some links and it takes time to load those images.
I don't want to use JavaScript to preload images. Are there any good solutions?
HTML5 has a new way to do this, by link prefetching.
<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
Just add as many link tags as you need in your HTML and you are good to go. Of course, older browsers will not load the content this way.
Note
Above code will not work for Apple Safari safari does not support prefetch til now version 12 https://caniuse.com/#search=prefetch
UPDATE
If your server is served with HTTP2, you can also add a Link header in your response a made use of HTTP2 Server Push.
Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;
From http://snipplr.com/view/2122/css-image-preloader
A low-tech but useful technique that uses only CSS. After placing the css in your stylesheet, insert this just below the body tag of your page: Whenever the images are referenced throughout your pages they will now be loaded from cache.
#preloadedImages
{
width: 0px;
height: 0px;
display: inline;
background-image: url(path/to/image1.png);
background-image: url(path/to/image2.png);
background-image: url(path/to/image3.png);
background-image: url(path/to/image4.png);
background-image: url();
}
There is no need to preload images. I can't understand why 99% people thinks, that hover effects have to use 2 images. There is no such need, and using 2 images makes it look bad.
The only good solution I know is to use CSS for A elements (or easy JS for all other buttons). When button us hovered set background-position to some offset.
a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); }
a:hover { background-position:0 26px }
That's all, image used you can see below:
(source: margonem.pl)
Edit: You can also use it other way. Instead of toggling image, you can hide your image. So starting point would be "background-position:0 -100px" and on hover "0 0".
This technique is called CSS sprites - here is good description of it: http://css-tricks.com/css-sprites/
A technique I didn't see mentioned here yet, which works great if you don't need to worry about IE6 & 7, is to use the :after pseudo-selector to add your images as content to an element on the page. Code below lifted from this article:
body:after {
content: url(img01.jpg) url(img02.jpg) url(img03.jpg);
display: none;
}
The only downside I can see to this compared to using JavaScript to preload the images is that there is no easy way to release them from memory.
You could use a hidden div to put images in. Like so
<html>
<body>
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden">
<img src="img1.jpg" /><img src="img2.jpg" />
</div>
<div>Some html</div>
</body>
</html>
This only works for images though, ie. if you're trying to do the same for say .swf files there will be problems. Firefox doesn't run the .swf file if it's not visible.
<link rel="preload" as="image" href="..." />
This works best for me when we want to load image early for CSS
(while rel="prefetch" will cause duplicate loading from CSS)
Reference your images in invisible img tags. while page loading they will downloaded too.
As I'm not sure if hidden images are loaded, you'll probably want to use image sprites. Then the entire image is loaded before anything is displayed. You can even put all of your menu items in one image and therefore save a lot of HTTP requests.
If preloading images is what you seek, then performance is what you want. I doubt blocking up the page while the resources load is what you want. SO, just place some prefetching links at the end of the body and add the bogus media to them to make them appear unimportant (so that they get loaded after everything else). Then, add the onload tag to those links, and in that onload will be the code that sets the source of the actual resource in your page. For example, this could even be used in conjunction with dynamic iframes.
Before:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
After:
<a onclick="myFrame.style.opacity=1-myFrame.style.opacity">
Click here to toggle it
</a><br />
<iframe id="myFrame" src="" style="opacity: 0"></iframe>
<link rel="prefetch" href="http://jquery.com/"
onload="myFrame.src=this.href" media="bogus" />
Notice how the first one (before) freezes up the page and blinks in a quite ugly manner while the second one (after) with the content preloaded doesn't freeze up the page or blink, rather it appears and disappears seamlessly instantly.
Can't you add them as an <img /> tag to your page and hide them using css?