I have a page with a very long list of images and I'm looking to lazy load them. But instead of loading the images when they appear in the viewport, I want to load them in order of id when the page is ready. Is there any way to do this?
Here is my markup. My goal would be to load realimg1, realimg2, realimg3, etc in order.
<img src="loading.png" width="300" height="200" id="id1" data-src="realimg1.png">
<img src="loading.png" width="300" height="200" id="id2" data-src="realimg2.png">
<img src="loading.png" width="300" height="200" id="id3" data-src="realimg3.png">
<img src="loading.png" width="300" height="200" id="id4" data-src="realimg4.png">
<img src="loading.png" width="300" height="200" id="id5" data-src="realimg5.png">
Right now, I'm using this plugin just lazy loading images by replacing the src with data-src when the image come into the viewport. How would I do the same thing but do it on load in order of id instead of when they appear in the viewport?
I don't think you will find the lazy loading to be of any use as it's functionality is entirely directed at loading based on images appearing in the viewport.
Check this out:
Hi, this demo might be of interest to you
http://nettuts.s3.amazonaws.com/860_preloaderPlugin/index.html
and the corresponding tutorial is here:
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/
it uses a jQuery plugin that is called like this:
<script type="text/javascript">
$(function(){
$("#gallery").preloader();
});
</script>
Where
<ul id="gallery" class="clearfix">
<li><p><img src="images/1.jpg" /></p></li>
<li><p><img src="images/2.jpg" /></p> </li>
<li><p><img src="images/3.jpg" /></p> </li>
<li><p><img src="images/4.jpg" /></p></li>
<li><p><img src="images/5.jpg" /></p> </li>
</ul>
source: http://wpquestions.com/question/showChrono/id/7959
<script>
function lazyLoader(id){
var images = document.getElementById(id).getElementsByTagName('img');
for(prop in images){
images[prop].setAttribute('src', images[prop].getAttribute('data-src'));
}
}
// should be called after document ready or load -
lazyLoader('lazy_loader');
</script>
You can use the justlazy plugin, which prevents to use external dependencies. It can load by id. You only have to provide the images to load.
For your images you can call the library as follows:
var placeholders = document.querySelectorAll(".some-class-of-images-to-load");
for (var i = 0; i < placeholders.length; ++i) {
Justlazy.lazyLoad(placeholders[i]);
}
The placeholders have to be in the following structure:
<span data-src="default/image" data-alt="some alt text"
class="some-class-of-images-to-load">
</span>
For SEO reasons you can use any other placeholder element.
Related
Within an svg tag, there multiple image elements, showing thumbnail images. Because of the large number of images, the page loading tooks a long time. So I want to implement an easy lazy load like David Walsh’s Simple Image Lazy Load and Fade. For img elements it works fine. But for image elements of an SVG area, the load will not be done.
Example:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" xlink:href="img1.jpg"/>
</svg>
</div>
And the JS coding:
// This works fine
var img = jQuery("#myimg");
img.attr('src', img.attr('data-src'));
img.on("load", function () {
img.removeAttr('data-src');
});
// This doens't work, onload will not be processed, image will not be not shown
var image = jQuery("#myimage");
image.attr('xlink:href', image.attr('data-href'));
image.on("load", function () {
image.removeAttr('data-href');
});
The scripting will leave the page in this way:
<div>
<img id="myimg" height="20" width="20" data-src="img1.jpg"/>
</div>
<br>
<div>
<svg width="10%">
<image id="myimage" height="20" width="20" data-href="img1.jpg" xlink:href="img1.jpg"/>
</svg>
</div>
Why is onload not working for this SVG image element?
You have several small mistakes:
<image/> is a self-closing tag,
xlink:href should be used without xlink: prefix,
it's better to set eventListener before you changing attribute.
See the snippet:
var image = jQuery("#myimage");
image.on("load", function () {
console.log('loaded');
image.removeAttr('data-href');
});
image.attr('href', image.attr('data-href'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
<image id="myimage" width="150" height="150" data-href="https://pbs.twimg.com/profile_images/843090368837042176/Nl-rCb9c_400x400.jpg"/>
</svg>
Here is my solution to the same problem where I keep using the xlink:href attribute for the raster image to show inside the SVG, but still lazy-load on click. I'm using different lazy-load plugin (jquery.lazy.js) but it's very similar:
<svg>
<image id="lazy-img" class="lazy" width="" height="" data-source="myimage.jpg" />
</svg>
$('.someElement').on('click', function() {
var image = $('#lazy-img");
image.attr('xlink:href', 'myimage.jpg');
image.attr('href', 'myimage.jpg');
});
The idea is that the initial HTML markup is for the lazy-loading images and on click event we are swapping the markup back to work with SVG, after the image is lazy-loaded.
I have certain images all in blogspot.com, and i want to append class name to it via Javascript which are under particular div.
for an instance :-
<div class="outer-post">
<img src="http://1.bp.blogspot.com/1.jpg" width="200" height="200" />
<!-- more images -->
<img src="http://1.bp.blogspot.com/100.jpg" width="200" height="200" />
</div>
and i want to convert all to :-
<div class="outer-post">
<img src="http://1.bp.blogspot.com/1.jpg" class="myPic" width="200" height="200" />
<!-- more images -->
<img src="http://1.bp.blogspot.com/100.jpg" class="myPic" width="200" height="200" />
</div>
Is this possible?
using jQuery $("div.outer-post img").addClass("myPic")
You can use .addClass()
$(selector).addClass(className);
As per your requirement use
$("div.outer-post img").addClass("myPic");
Edit: As per your comments use
$("div.outer-post").find("img").addClass("myPic");
JSFiddle Demo
I have a WooCommerce setup where I have a gallery. One is big image and others are thumbnails.
What I want to do is when someone clicks on the thumbnail, it replaces the big image and the big image comes there at the thumbnail. How do I do that? Any JavaScript guru here to help?
Here is the full HTML output.
<div class="images product-gallery ">
<div class="big_image">
<a title="" href="http://www.domain.com/image001.jpg" itemprop="image" class="woocommerce-main-image zoom"><img width="300" height="300" alt="" class="attachment-shop_single wp-post-image" src="http://www.domain.com/image001-300x300.jpg"></a>
</div>
<div class="thumbnails">
<a title="" class="zoom first" href="http://www.domain.com/image002.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image002-90x90.jpg"><div class="numbers">1</div></a>
<a title="" class="zoom" href="http://www.domain.com/image003.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image003-90x90.jpg"><div class="numbers">2</div></a>
<a title="" class="zoom last" href="http://www.domain.com/image004.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image004-90x90.jpg"><div class="numbers">3</div></a>
<a title="" class="zoom first" href="http://www.domain.com/image005.jpg"><img width="90" height="90" alt="" class="attachment-shop_thumbnail" src="http://www.domain.com/image005-90x90.jpg"><div class="numbers">4</div></a>
</div>
<div class="clear"></div>
</div>
I don't need that <a href=" part on image. So, you can ignore them.
I have very little knowledge in JavaScript, so please help me out. All I want is when someone click on any of the thumbnail image, the thumbnail image replaces the big image and the big image replace the clicked thumbnail. So basically the alter positions.
Please pardon me for my poor English.
Jquery
You can use src attr() in onclick event
$("#target").attr("src","newUrlOfTheImg");
or with plain java script
document.getElementById("target").src="newUrlOfTheImg";
And have look once
document.getElementById("target").src="myNewImage.extension";
Pure javascript alternative that you can use on the onclick event.
$(document).ready(function() {
$('.zoom').on('click', function() {
$('.big_image').find('img').attr('src', $(this).find('img').attr('src'));
});
});
You should try this out, however it would be better to have separate thumbnail and big-images files for loading purposes.
I'm developing an application with Phonegap framework. I want to know how can I call one div tag element with another tag element using onclick Javascript function.
Here is my code:
I need to display second image onclicking the first image. (With CSS style class names:visible/invisible)
<div id="abc" class="visible">
<img style=" z-index:-1" src="icons/firstimage.jpg" width="100%" height="100%" border="0" alt="logo">
</div>
<div id="def" class="invisible">
<img style=" z-index:-1" src="icons/secondimage.jpg" width="100%" height="100%" border="0" alt="logo" >
</div>
You can call a javascript function on click and add class visible to the second div like below,
document.getElementById('def').className = 'visible';
DEMO HERE
You can just include regular JavaScript, below I'm using jQuery but that was just for my convenience.
<div onClick="$('#OtherDiv').html('you click')">test</div>
<div id="OtherDiv"></div>
I would like to replace images on click but also have the replaced image click to a lightbox. Here is my example where the first image has the lightbox: http://www.artdesigngroup.co/products/test.html
My thought is that I need to apply the "display" ID on the surrounding div and replace the images within this div. But how do I do this and create the lightbox?
Thank You.
I would rethink your structure for handling this. Most of what you are doing can be handled with straight jQuery instead of rolling your own swap functions. When you ask your questions, including a Fiddle is a great way to get an answer faster. Note that I am using jQuery 1.7's prop method here which you should be using instead of attr.
http://jsfiddle.net/txbqX/3/
jQuery to get what you want
//when main image is clicked, show it in colorbox
$('#foo a').colorbox();
//when thumb is clicked, set main image to it
$('div#thumbs img').click( function() {
$('#foo a').prop('href', $(this).prop('src'));
$('#foo img').prop('src', $(this).prop('src'));
return false; //stop link from navigating
})
Simplified HTML
<div id="foo" >
<a href="http://www.artdesigngroup.co/images/tv-frames/01.jpg">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="304" height="304" name="Display" id="display" />
</a>
</div>
<br />
<div id="thumbs">
<img src="http://www.artdesigngroup.co/images/tv-frames/01.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/02.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/03.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/04.jpg" width="56" height="56" />
<img src="http://www.artdesigngroup.co/images/tv-frames/05.jpg" width="56" height="56" />
</div>