I use lazy loading to load the images with the centered background loading icons, but I felt unnecessary to include the lazy loading effect in this question. I want to remove the loading icon after the image is loaded because the smaller images may not cover the loading icon.
I use the same external CSS file for loading icons. None of the closest solutions worked for me.
Any suggestions and help would be appreciated.
HTML
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
CSS
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
You can implement onload event of image, inside it remove class wrapper as
$(".lazy").on('load', function() { $('.wrapper').removeClass('wrapper'); })
Update: if you want to remove only loading for each image change to remove parent class only.
$(this).parent().removeClass('wrapper');
$(".lazy").on('load', function() { $(this).parent().removeClass('wrapper'); })
.wrapper {
background: url(https://i.stack.imgur.com/yW2VY.gif) no-repeat center;
min-height: 220px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/kn7VW.jpg" alt="Large Image" width="800" height="380" />
</div>
<div class="wrapper">
<img class="lazy" src="https://i.stack.imgur.com/BsJCI.jpg" alt="Small Image" width="250" height="180" />
</div>
Related
I saw this solution and i don't understand where is the preload here:
function preloadImage(url)
{
var img=new Image();
img.src=url;
}
On my html file i have this part:
<div id="slideShow">
<img src="Images/radar000025.Gif" alt="slide" />
<img src="Images/radar000203.Gif" alt="slide" />
<img src="Images/radar000251.Gif" alt="slide" />
<img src="Images/radar000267.Gif" alt="slide" />
<img src="Images/radar000283.Gif" alt="slide" />
<img src="Images/radar000284.Gif" alt="slide" />
<img src="Images/radar000301.Gif" alt="slide" />
<img src="Images/radar000539.Gif" alt="slide" />
<img src="Images/radar000556.Gif" alt="slide" />
<img src="Images/radar000571.Gif" alt="slide" />
<img src="Images/radar000588.Gif" alt="slide" />
<img src="Images/radar000589.Gif" alt="slide" />
<img src="Images/radar000794.Gif" alt="slide" />
<img src="Images/radar000810.Gif" alt="slide" />
<img src="Images/radar000811.Gif" alt="slide" />
<img src="Images/radar000812.Gif" alt="slide" />
<img src="Images/radar000813.Gif" alt="slide" />
<img src="Images/radar000814.Gif" alt="slide" />
<img src="Images/radar000830.Gif" alt="slide" />
<img src="Images/radar000831.Gif" alt="slide" />
<img src="Images/radar000832.Gif" alt="slide" />
<img src="Images/radar000833.Gif" alt="slide" />
<!-- #slideShow --></div>
Then in the bottom i'm calling javascript file:
<script type="text/javascript" src="SlideShow.js"></script>
In the SlideShow.js i have the functions of timer and buttons and events.
And last i have a style file Screen.css for all the styling.
What i want to do is to make a preloader for all the images maybe even with a progressBar that show each image loading progress.
I saw some examples and i saw this answer above of the small function but i'm not sure how to use it with my code.
This is my site with the working slideshow but without a preloader:
Slide Show
And this is the SlideShow javascript file and css file: newsxpressmedia.com/SlideShow.js , newsxpressmedia.com/Screen.css
Maybe using ajax for the preloading is better not sure.
Hope this might help you . Try this
#charset "utf-8";
/* Preloader */
#preloader {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:#fff; /* change if the mask should have another color then white */
z-index:99; /* makes sure it stays on top */
}
#status {
width:200px;
height:200px;
position:absolute;
left:50%; /* centers the loading animation horizontally one the screen */
top:50%; /* centers the loading animation vertically one the screen */
background-image:url(http://1.bp.blogspot.com/-IdPZAIYB_38/UAsThCuCjcI/AAAAAAAABK0/wzErRGy13NU/s1600/loading.gif); /* path to your loading animation */
background-repeat:no-repeat;
background-position:center;
margin:-100px 0 0 -100px; /* is width and height divided by two */
}
<body>
<!-- Preloader -->
<div id="preloader">
<div id="status"> </div>
</div>
<!-- Your Website Content -->
<div>
This is your website content
<img src="http://newsxpressmedia.com/files/radar-simulation-files/radar002407.Gif" />
</div>
<!-- jQuery Plugin -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<!-- Preloader -->
<script type="text/javascript">
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$("#status").fadeOut(); // will first fade out the loading animation
$("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
})
//]]>
</script>
</body>
I'd like to have a slideshow of my work but I'm new to html/css/jquery. I'm working with a jquery plugin that looks like this:
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({
fx: 'scrollHorz',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev'
});
</script>
HTML looks like this:
<div align="center" id="slideshow">
<div class="controller" id="prev"></div>
<div id="slider">
<img src="Images/Logo_01.jpg" width="960" height="576" alt="logo"/>
<img src="Images/Logo_02.jpg" width="384" height="640" alt="logo"/>
<img src="Images/Logo_03.jpg" width="640" height="640" alt="logo"/>
<img src="Images/Logo_04.jpg" width="960" height="510" alt="logo"/>
<img src="Images/Logo_05.jpg" width="956" height="640" alt="logo"/>
</div>
<div class="controller" id="next"></div>
</div>
I've been modifying the slider id & I've tried everything I know-margin:0 auto;, text-align: center, display: block; but nothing's working. help?
Try this:
Using jQuery
$('#slider img').css({position: 'relative', margin: 'auto'});
Using CSS, you have to use !important as cycle jQuery plugin is adding inline CSS to images
#slider img {
position: relative !important;
margin: auto !important;
}
There is a blank image (blank.png) with background hover effect, which works. I click on the image and it hides, then the video div shows, which works. What I can't figure out is how to get the video to play on the click on original blank image.
I have it working most of the way, but can't get the video to play on click of the image.
I am not the best with scripting.
An example of what I have done:
http://jsfiddle.net/3s8EC/2/
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
});
});
});
</script>
<style>
#imageID {background: url(http://edigi.co/Video-Intro.jpg) no-repeat;
height: 370px;
width: 100%;
}
#imageID:hover {
background: url(http://edigi.co/Video-Intro-Hover.jpg) no-repeat;
}
</style>
<div style="width: 100%; height: 370px; background-color: #000;">
<div id="promovid">
<div class="custom-th">
<img src="http://edigi.co/blank.png" id="imageID" width="100%" height="370" />
</div>
<div id="thevideo" style="display:none; padding: 0px;">
<center>
<video onclick="this.play();" preload="auto" width="600" height="370">
<source src="http://edigi.co/Impatto_Branding_Agency-Large.mp4" type="video/mp4"/>
</video>
</center>
</div>
</div>
</div>
Any help is appreciated, but since I am not the best with scripting an actual example, or edit the jsfiddle, would be totally super awesome.
Thanks in advance for the help.
Just add a $("video").click();
Like this:
$(document).ready(function() {
$('.custom-th').click(function() {
$('.custom-th').fadeOut('fast', function() {
$("#thevideo").css("display","block");
$("video").click();
});
});
});
Add an id to the video if you have multiple videos on the page and use it's id instead of "video" in the selector.
I have the code below,and I want to images to be change with a fade,the images now are been replaced by the function 'changeBg',but they are just been replaced without fade.
how can I "merge" between the function that's changing the images and the function that in charge of the fade.
thanks.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<title>none</title>
<link rel="stylesheet" type="text/css" href="Css/design.css" >
<script src="query-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(document).ready(function() ({$('').fadeIn(1000);
});
</script>
<script language="JavaScript">
function changeBg (color) {
document.getElementById("wrapper").style.background="url(Images/"+color+".jpg) no-repeat";}
</script>
</head>
<body>
<div id="wrapper" class="wrapper">
<div class="logo"><img border="0" src="Images/logo.png" >
</div>
<div class="menu">
<img border="0" src="Images/arrowleft.png" >
<img border="0" src="Images/black.png" onclick="changeBg(this.name);" name="black">
<img border="0" src="Images/blue.png" onclick="changeBg(this.name);" name="blue">
<img border="0" src="Images/fuksia.png" onclick="changeBg(this.name);" name="fuksia">
<img border="0" src="Images/brown.png" onclick="changeBg(this.name);" name="brown">
<img border="0" src="Images/orange.png" onclick="changeBg(this.name);" name="orange">
<img border="0" src="Images/red.png" onclick="changeBg(this.name);" name="red">
<img border="0" src="Images/grey.png" onclick="changeBg(this.name);" name="grey">
<img border="0" src="Images/white.png" onclick="changeBg(this.name);" name="white">
<img border="0" src="Images/arrowright.png" >
</div>
</body>
</html>
Thanks!
If I understand you correctly, you might be able to fade the background out, change it, then fade it back in again? Like this:
function changeBg (color) {
$('#wrapper').fadeOut(1000,function(){
$(this).css('background','url(Images/'+color+'.jpg) no-repeat').fadeIn(1000);
});
}
The cross-fading (fade out while fading in) is achieved in jQuery by having the statements straigh in line and not inside functions from previos animation.
Also, I understand that you want JUST THE BACKGROUND IMAGE to fadeout and fadein; not the actual contents of the page.
To achieve that, make your background image a separate item altogether but inside of the main div you have backgrounded:
<div id='wrapper' style='position:relative' > <!-- must be relative -->
<img id='bg1' src='initial.image' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
<img id='bg2' src='initial.imageTWO' style='position:absolute; top:0; left:0;
width:100%; height:100%; opacity:0.2; display:none; ' />
</div>
function changeBackground(which) {
$('#bg'+which).attr('src','current-image.xxx').fadeOut('slow');
which = (which = 1) ? 2 : 1;
$('#bg'+which).attr('src','next-image.xxx').fadeIn('slow');
setTimeout('changeBackground('+which+')',2000);
}
$(document).ready( function () {
$('#bg1').attr('src','image-name.xxx').fadeIn('slow');
setTimeout('changeBackground(1)',2000); //every 2 seconds?
. ......
});
In case you have various images for the "slide show", you might want to add a random
number generation for which picture to show next.
For some reason, when I first go to a recent page I built, the jQuery Cycle plugin does not work. The site is located here (site is in a different language [Hebrew]).
Regardless of the language it's in, the Cycle plugin works fine in Firefox and IE. I'm wondering if this is a bug on my end or a bug on the plugin's end.
If it's a bug on my end, how can I fix it?
The solution to this problem, based on the fact that Google Chrome fails to properly render the height of the dynamically generated div's (as #ulima69 observed), is to give the wrapping div (.slideshow) a designated width & height that is congruent with the images' width/height.
This fixes the bug for now. If the images were all different dimensions, a more complicated solution should be sought. #ulima69 provided two links to alternative cycle plugins that should work with Chrome. Do what works for you.
Amit
You have to use .load instead of .ready to allow the images to load on the page
$(window).load(function() {
$('.element').cycle();
});
Here is a quick demo for you: http://jsfiddle.net/VpnPb/4/. I have used jQuery 1.6.4 and everything works fine with different image dimensions.
$('#s5').cycle({
fx: 'fade',
pause: 1
});
$('#s6').cycle({
fx: 'scrollDown',
random: 1
});
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;
}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
<link href="http://jquery.malsup.com/cycle/cycle.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle.all.js"></script>
<script src="http://malsup.github.io/chili-1.7.pack.js"></script>
<div id="s5" class="pics">
<img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>
<br/>
<div id="s6" class="pics">
<img src="http://desmond.yfrog.com/Himg735/scaled.php?server=735&filename=u2tc.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg611/scaled.php?server=611&filename=ei41.jpg&res=iphone" width="200" height="200" />
<img src="http://desmond.yfrog.com/Himg616/scaled.php?server=616&filename=2113.jpg&res=iphone" width="200" height="200" />
</div>