Disable loading images while the web-page is loading - javascript

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>

Related

Creating a if else to display alternative div based on url

I'm trying to do an if else statement for displaying one div or the other based on url but it's not working at all only one div constantly displays:
Div 1 is the only one that keeps showing, I've tried numerous work-arounds:
<script>
if (window.location.href.indexOf("pink") > -1)
{
document.getElementById("div2").style.display="none";
}
else {
document.getElementById("div1").style.display="none";
}
</script>
<div id= "div2">
<a id="link2" href="https://example2" target="_top"></a>
</div>
<div id= "div1">
<a id="link1" href="https://example1" target="_top"></a>
</div>
<style>
#link2
{
background: url(http://examplemy.com/wp-content/backtwo.PNG);
background-repeat: no-repeat;
background-size:cover;
}
#link1
{
background: url(http://examplemy.com/wp-content/backone.PNG);
background-repeat: no-repeat;
background-size:cover;
}
html, body {width: 100%; height: 100%; margin: 0;}
I've now put the script at the end but still not working.
Also, take my sites usr as examplemy/pink
The script is running before the divs are loaded. It won't be able to find them; you'll probably see errors in your development console if you open it when loading this page. You should either move the script below the divs, or put the code in an event handler for the load event of the window (window.addEventListener('load', function() { ... })) so that it won't run until the divs have loaded. (You can also use the DOMContentLoaded event instead of the plain load event for this case, though that's less well-known.)

jQuery.Lazy() - lazy load background image of section with id

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.

Only load lightbox image on click - Reduce page loading time

I coded a press page with some simplistic CSS lightbox code, it worked quite well until the loading time of the page became insane because it was loading all the images before they're even displayed.
With 10 or 12 images it was fine, but I've since added more images to the page and now it's a huge beast. I've implemented lazy-loading for the image covers, that's improved things a little.
The only thing I need now is for the lightbox images to load on click, not when you first navigate to the page. I'm looking for a simple html or CSS solution, but would settle for a Javascript or Jquery one if need be.
A link to the page:
http://agentboris.com/press/index-2.php#_
Here is the HTML for the image that includes the lightbox effect and lazy-loading:
Click to View
<a href="#_" class="lightbox parastyle" style="text-decoration: none; color: black;" id="moon2">
<br /><p class="parastyle" style="letter-spacing: 0.1em; text-decoration: none; color: black;">← BACK <br/></p>
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="round arrow-over">
</a>
And the CSS:
/** LIGHTBOX MARKUP **/
.lightbox {
/** Default lightbox to hidden */
display:none;
/** Position and style */
position: absolute;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
top: 10000px;
left: 0;
background-color: #fafbff;
overflow:auto;
}
.lightbox img {
/** Pad the lightbox image */
/*max-width: 90%;*/
margin-top: 2%;
border: solid 1px #E0E0E0;
}
.lightbox:target {
/** Remove default browser outline */
outline: none;
position: fixed;
top: 0;
left: 0;
/** Unhide lightbox **/
display: block;
}
Simply use lazySizes. Only thing you have to do is to alter your markup and add the class lazyload (assuming you already have data-src):
<img src="images/lightbox-placeholder.png" data-src="images/moon2.jpg" height="353" width="753" class="lazyload round arrow-over">
lazySizes then will automatically only load the image if the image becomes visible (by clicking on the thumb).
Not a php guy, but could you not make an API call to grab the image's src, rather than assigning them to an img?
Meaning, you have XX number of thumbnails (I'm assuming). But it's loading the bigger images that's the problem. Therefore, only have (1) lightbox, but switch out the image src on click.
Also, since you've named all of your images (big) with the suffix of -thumb, you don't really need to make an API call.
HTML
<div class="presscoll">
<a href="#boris-2014-awards" class="show-lightbox">
<img src="images/boris-2014-awards-thumb.jpg" width="470" class="round press arrow-over" />
</a>
..... more thumbnails
</div>
Only have (1) of these.
<a href="#_" id="show-lightbox" class="lightbox parastyle" style="text-decoration: none; color: black;" id="boris-2014-awards">
<br /><p class="parastyle" style="letter-spacing: 0.05em;">← BACK <br/></p>
<img src="images/boris-2014-awards.jpg" height="4064" width="800" class="round arrow-over">
</a>
$('.presscoll').on('click' 'a.show-lightbox', function(e) {
// get src and remove "-thumb"
var src = $(this).find('img').attr('src');
src = src.replace('-thumb', '');
// change image attr
$('#show-lightbox').find('img').attr('src', src);
// may need to call lightbox initialize again here
});
Basically we're just listing out all of your thumbnails, but there's no reason to load all XXX of the bigger images. Just have the base elements for the lightbox there and then switch the src on the "big" image. As stated above, you may need to re-call your lightbox.
This isn't tested btw, but the idea will work.

Trying to make a button in html with javascript

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.

Best way to insert loader icon if images has not been fully loaded?

given the html structure:
<div class="image-container">
<img id="firstslide" src="img/verybig.jpg">
</div>
I wonder if there is an easy and simple way to check
if an image is currenly being loaded and insert into div a load icon and
has finished loading and show the fully loaded picture
Any hints with that?
I would do it from CSS, as setting the loader animation image as the background of the selected images:
CSS:
img.loader {
background: url(loader.gif) 50% 50% no-repeat;
}
HTML:
<div class="image-container">
<img id="firstslide" class="loader" style="width: 100px; height: 100px;" src="img/verybig.jpg" alt=""/>
</div>
jsFiddle: http://jsfiddle.net/FjfvZ/60/
If you're using jQuery:
<div id="loading">Loading</div>
<img id="image" src="image.png" style="display:none"/>
<script>
$('#image').load(function()
{
$('#loading').hide();
$(this).show();
});
</script>
I use an image preloader plugin:
http://www.farinspace.com/jquery-image-preload-plugin/
This will give you control to do whatever you want to do.
You could use a small loading image as the background image which will be covered up by the actual image once it has loaded.
Here's a jsFiddle example.
this provides a simple n good solution:
http://www.appelsiini.net/projects/lazyload

Categories