I want to apply lazy loading for one image with method .lazy() for a section with id. The section has configured background via CSS. Below is code:
HTML
<section id="showcase">
</section>
CSS
/* Showcase*/
#showcase {
min-height: 400px;
background: url("../img/example.jpg") no-repeat -300px -500px;
background-size: cover;
}
JS
<script>
$(function() {
$("#showcase").lazy();
});
</script>
How should I change the code? Because now it doesn´t work. It is working only when I have a code and a tag <img class="lazy" data-src="../img/example.jpg" /> as you can see in an example below:
http://jquery.eisbehr.de/lazy/example_basic-usage
According to the JQuery.Lazy docs and demos in their website, you could load background images by setting the data-src attribute to the element on which you want to load the background image.
So in your case you could do as follows:
<section id="showcase" data-src="../img/example.jpg"></section>
Then you will need to remove the background-image definition from the css style.
You can check their working example on their website.
Related
I was trying to get a parallax effect on my website's landing page. I used the interactive_bg.js plugin and working backwards from the demo tutorial I was finally able to get the picture I want with the desired effect.
Here's my code:
HTML -
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
</body>
CSS -
html {
height: 100%;
}
body {
padding: 0;
text-align: center;
font-family: 'open sans';
position: relative;
margin: 0;
height: 100%;
}
.wrapper { // this class isn't really needed but I thought it may help when putting other elements atop this div.
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
.bg {
position: absolute;
min-height: 100% !important;
width: 100%;
z-index: 0;
}
.ibg-bg {
position: absolute;
}
Js -
$(document).ready(function(){
$(".bg").interactive_bg({
strength: 20,
scale: 1.00,
contain: false,
wrapContent: true
});
});
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
I reverse engineered the tutorial files to find this code.
Now the problem is, anything that I put into the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> messes up the picture. Any div I want to put after the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div doesn't even show up on the screen but is rather behind the background image.
How do I put text and other divs on the <div class="wrapper bg" data-ibg-bg="pics/Q.jpg"> div and more content after that div ends?
I have tried z-index and positioning (by looking at the code from the tutorial). It doesn't seem to work.
Also, the CSS only works when I put it in a style tag inside the <head> of the HTML. If I put the CSS in a separate file it doesn't work.
(I did link the CSS to the HTML correctly)
P.S refer to the tutorial I linked above, it'll get you an idea.
UPDATE:
I made some changes to the HTML and now I have text over the image. And the text isn't moving anymore but adds a white space on top. I tried margin but it didn't remove the white space. I still can't add anything below the image.
HTML-
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
</div>
<div class="main"> <h1> SOME TEXT </h1></div>
</body>
CSS -
#main{
position: relative;
}
Did you see the demo? http://www.thepetedesign.com/demos/interactive_bg_demo.html
wrapper div will take all the space available, width 100% and height 100%.
wrapper div holds all the content, position absolute.
ibg-bg div is just holds the background image and its not intended to have content inside, position absolute makes easy to put content over it; no need for z-index.
Any other div inside wrapper div and after ibg-bg div will show on top.
How do you put text over the background?
As I said before, put that content inside the wrapper div and after the ib-bg div.
How do you put text or more content after that div?
Add your new content below wrapper div and start playing with css properties to adapt the demo to your preferences.
<body>
<div class="wrapper bg" data-ibg-bg="pics/Q.jpg">
<!-- You need this next div -->
<div class="ibg-bg"></div>
<div>This will appear over your background</div>
</div>
<div>This will appear below your background</div>
</body>
[Edit]
CSS Copied from demo.
#main {
position:relative;
float:left;
width:100%;
margin:0 auto;
}
[/edit]
After pondering around for a while it turned out to be a JS error. I had done a mistake in javascript while copying the script for the plugin execution.
Shout-out to #Triby for helping me out with the CSS, though that is a different thing and I will state it in another question.
Here's the working JS -
$(document).ready(function(){
$(".bg").interactive_bg({
scale: 1.05,
strength: 25,
animationSpeed: "150ms"
})
})
$(window).resize(function() {
$(".wrapper > .ibg-bg").css({
width: $(window).outerWidth(),
height: $(window).outerHeight()
})
})
Most of my website visitors are using limited bandwidth & slow internet.
so I'm trying to reduce the load time and save their bandwidth by disable loading images & background images while the web-page is loading, then give an option to load the web-page's images when click "show images" button.
i'm thinking of some thing like lazy load but with on-click action.
I appreciate your suggestions.
One idea:
-Keep empty src attributes for images
-Store img urls on an attribute (you can call it data-src)
-Use Jquery to replace src with data-src value when page is loaded or when User clicks "show images"
I think there are 2 different scenarios:
IMG-TAGS
HTML:
<img src="" data-load="http://imagesource" alt="">
jQuery:
$('img[data-load]').each(function(){
$(this).attr('src', $(this).data('load'));
});
BACKGROUND-IMAGES
HTML:
<div class="background-placeholder"></div>
CSS:
.background-placeholder {
background-color:#fff;
width:250px;
height:250px;
}
.show-bg1 {
background-image:url('http://imagesource');
}
jQuery:
$('.background-placeholder').addClass('show-bg1');
CSS background-images are not loaded when a class isn't used (Same on hover etc.)
It's not the most efficient way to do this, but it could give you an idea on how its done.
Maybe you could store css-classes with the right background images also in data-attributes and loop through.
FIDDLE
The nested functions look a bit yucky, but here's a jQuery solution to your problem, using the method mentioned above.
$(document).ready(function(){ // wait until the document is loaded
$('#loadimages').click(function(){ // before registering the event handler
$('img[data-src]').each(function(){ // and for each image with a data-src attribute
$(this).attr('src', $(this).data('src')) // copy it's contents into the src attribute
})
})
})
img[data-src]{
width: 200px;
height: 400px;
background: grey;
position: relative;
}
img[data-src][src=""]::after {
content: 'Placeholder';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, 50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="" data-src="http://lorempixel.com/200/400"/>
<img src="" data-src="http://lorempixel.com/200/400"/>
<img src="" data-src="http://lorempixel.com/200/400"/>
<button id="loadimages">Load Images</button>
I am working on a Homepage right now, and got a few Problems.
I got a Background-Image set to Cover in the Body:
body{
opacity: 1;
transition:opacity 0.5s ease-out;
background-image: url(Background.jpg);
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Now I want that to change the opacity of the whole body-tag to 0 with javascript.
$("body").css("opacity", "0");
Everything disappears except the background-image, although it's in the body-tag?
Any Ideas?
UPDATE!!
I uploaded the "problem-site" to a webspace.
Website
Just click on "Query" than click in any box and press ENTER to call the js-function.
Thanks!!
I've made a fiddle with your code that reproduces the issue. Code can be simplified into this:
body{
opacity: 0.1;
background-color: red;
}
The root issue is that fiddling with the opacity of the <body> element doesn't have any effect unless you have something below. A simple fix is to add this:
html{
background-color: white;
}
Updated fiddle
For whatever reason (I can't seem to find any references to why), setting opacity:0 or visibility:hidden on the <body> tag has no effect on the background-image. It definitely has an effect an element with a background-image that is a child of the body tag. So you have two options:
Add a wrapper <div> around the <body> content:
Where you currently have:
<body>
<!-- Content -->
</body>
Change this to:
<body>
<div id="wrapper">
<!-- Content -->
</div>
</body>
And move the CSS on body to #wrapper as well any Javascript/jQuery targeting body
Set the opacity on the HTML element
Wherever you are setting opacity:0, do it on the <html> element instead.
Personally, I'd recommend the first option.
I have never coded before so i dont know much, i watched this youtube video on how to make a js button youtube video
<div style="position:absolute; margin-left:1202px;"
<input type="image" src="images/login.png"
onmouseover="javascript:this.src='images/loginpressed.png';"
onmouseout="javascript:this.src='images/login.png';" />
</div>
i can see that the code works in dreamweaver, but for somereason, others cannot see it on the website
You forgot a > after <div style="position:absolute; margin-left:1202px;". Because of that, the button is now part of your div's declaration.
B.t.w. You can achieve a similar result by using another element than input type=image, like a span or div or an actual link element (a href) and apply some CSS to give it a different background image. For instance:
HTML:
<span class="button" onclick="alert('clicked');">Caption</span>
CSS:
.button {
display: inline-block;
height: 30px;
background-image: url(normalstate.png);
}
.button:hover {
background-image: url(hoverstate.png);
}
It may possible that path to your images not found at other place.
My HTML markup looks like that
<html>
<body>
<div id="loading"><img src="core/design/img/load/load.gif" /></div>
<div id="wrap"></div>
<div id="footer"></div>
</body>
</html>
I'm trying to hide whole page loading process with following solution.
CSS Rules:
#loading {
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
background-image:url("img/load/tr.png");
z-index:100;
}
#loading img {position: absolute; margin-left:-110px; margin-top:-9px; left:50%; top:50%}
And Jquery
$(document).ready(function(){
$('#loading').fadeOut(500);
});
Now, the problem is page loads like that:
first ugly draft of page (for 1-2 seconds)
appears loading div
loading whole content
disappears loading div
You can see it in action
I don't understand why loading div appears after 1-2 seconds?
I want to prevent 1).
I think this is a pretty simple one.
First make sure jQuery is called in your section.
First, wrap all the content of your page (except the loading div) in a div called
<div id="content-wrapper">
CONTENT HERE
</div>
Then using CSS set:
#content-wrapper {
visibility:hidden;
}
Then just make the jQuery into a function like this:
$(window).load(function(){
document.getElementById("content-wrapper").style.visibility="hidden";
$('#loading').fadeOut(500, function()
{
document.getElementById("content-wrapper").style.visibility="visible";
});
});
and I can see you're using Nivo Slider. Me too ;)
Edit: I fixed it, now it works perfectly. (You don't need the onload event in your body tag anymore)
Check out the example here: JSFiddle
Try moving the styles for loading to be inline instead of relying on the full external css file to load. If you look at Google Chrome Developer Tools and the Network tab, or a similar tool, you'll see the content of the page loads first, as expected, but then you have to wait until the external css is loaded and downloaded, and then the referenced image in the css file is loaded. Placing the style inline should assist in getting the loading element to display as soon as it can, or at least sooner.
<div id="loading" style="position: fixed;left: 0;top: 0;
width: 100%;height: 100%;background-image: url(core/design/img/load/tr.png);z-index: 100;"><img src="core/design/img/load/load.gif"></div>
Why not start everything else inside a <div style="display: none;" id="loaded">, and then when the loading has finished use $("#loaded").fadeIn()?