Don't Load Hidden Images

Don't load hidden images

Here's a jQuery solution:

$(function () {
   $("img").not(":visible").each(function () {
       $(this).data("src", this.src);
       this.src = "";
   });

   var reveal = function (selector) {
       var img = $(selector);
       img[0].src = img.data("src");
   }
});

It's similar to your solution, except it doesn't use the fakeSrc attribute in the markup. It clears the src attribute to stop it from loading and stores it elsewhere. Once you are ready to show the image, you use the reveal function much like you do in your solution. I apologize if you do not use jQuery, but the process should be transferable to whichever framework (if any) that you use.

Note: This code specifically must be ran before the window has fired the load event but after the DOM has been loaded.

Don't load hidden images or load contents when a tab is clicked

seems ajax not trigger. Change this code.

jQuery(document).on( 'click', '.img.imgslide', function( event ) {

to

jQuery(document).on( 'click', 'img.imgslide', function( event ) {

.img is not a class in your code.

Does display:none prevent an image from loading?

Browsers are getting smarter. Today your browser (depending on the version) might skip the image loading if it can determine it's not useful.

The image has a display:none style but its size may be read by the script.
Chrome v68.0 does not load images if the parent is hidden.

You may check it there : http://jsfiddle.net/tnk3j08s/

You could also have checked it by looking at the "network" tab of your browser's developer tools.

Note that if the browser is on a small CPU computer, not having to render the image (and layout the page) will make the whole rendering operation faster but I doubt this is something that really makes sense today.

If you want to prevent the image from loading you may simply not add the IMG element to your document (or set the IMG src attribute to "data:" or "about:blank").

fancybox - not to load hidden images

I would recommend using an AJAX call to fetch the gallery/images the user requests. This will be asyncronous and will not affect the page loading. Once a succesfull response is received, you can then initilise the $().fancybox() using the response data

lazy load doesnt work with hidden elements

thanks guys! but I also got a working solution on this:

http://codepen.io/kevkev/full/meebpQ/

 $(document).ready(function () {
 $("#art").click(function () {
 $("#art_pop").fadeIn(300);
 });

 $(".pop > span, .pop").click(function () {
     $(".pop").fadeOut(600);
 });
 });

;(function($) {
$.fn.unveil = function(threshold, callback) {
var $w = $(window),
th = threshold || 0,
retina = window.devicePixelRatio > 1,
attrib = retina? "data-src-retina" : "data-src",
images = this,
loaded;
this.one("unveil", function() {
var source = this.getAttribute(attrib);
source = source || this.getAttribute("data-src");
if (source) {
this.setAttribute("src", source);
if (typeof callback === "function") callback.call(this);
}
});
function unveil() {
var inview = images.filter(function() {
var $e = $(this);
if ($e.is(":hidden")) return;
var wt = $w.scrollTop(),
wb = wt + $w.height(),
et = $e.offset().top,
eb = et + $e.height();
return eb >= wt - th && et <= wb + th;
});
loaded = inview.trigger("unveil");
images = images.not(loaded);
}
$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
unveil();
return this;
};
})(window.jQuery || window.Zepto);

/*      OWN JAVASCRIPT         */

$(document).ready(function() {
$("img").unveil(200, function() {
  $(this).load(function() {
    this.style.opacity = 1;
  });
});
});

---

Related Topics