Wednesday, June 5, 2024
Homepage · html
 Popular · Latest · Hot · Upcoming
32
rated 0 times [  38] [ 6]  / answers: 1 / hits: 71343  / 8 Years ago, sun, january 8, 2017, 12:00:00

I am trying to load an image using the img data-src tag instead of just the img src. I have created two simple JSFiddle's although only the one with the img src works. These are here:



img data-src example THIS DOESN'T WORK AND I WANT IT TO



img src example THIS ONE DOES WORK.



Can somebody please fill in the blanks as to why the img data-src one doesn't work please? I am confused by this and been searching for an answer for hours.


More From » html
 Answers
35

You are using HTML5 data attributes which don't replace the normal HTML attributes of an HTML element, such as src. So your image needs to have a src attribute, whether it has a data-src or not, they are both independent of each other.




data-* attributes allow us to store extra information on standard, semantic HTML elements (...)







  • Loading an image when it appears on the screen:



A common approach to lazy-loading images is to set the src to a very small image, sometimes a 1x1px gif, and once the user scrolls and the image is on the screen replace the src with the real one. Something like this:



<img src=fake_small_image.gif data-src=real_image.jpg>


That data-src could be called data-whatever_you_want. The idea is that using JavaScript you track the scrollTop position of the page. Once the image is going to appear you replace the src value fake_small_image.gif with the data-src value real_image.jpg. The example you post in the comments of this answer, is ignoring the assignment of an initial src which is invalid.





var $window = $(window),

  window_height = $window.height() - 150, // I'm using 150 (a random number) so the image appears 150px after it enters the screen, so the effect can be appreciated

  $img = $('img.some_img'),

  img_loaded = false,

  img_top = $img.offset().top;



$window.on('scroll', function() {



  if (($window.scrollTop() + window_height) > img_top && img_loaded == false) {



    $img.attr('src', $img.attr('data-src_of_original_img'));



  }



});

#container {

  width: 100%;

  height: 200vh;

  background-color: grey;

}

.some_img {

  position: absolute;

  top: 100vh;

  width: 100%;

}

body {

  margin: 0;

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

<div id=container>

  <img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-src_of_original_img=https://i.imgur.com/Lcsolww.jpg alt= class=some_img>

</div>








  • Show an image as soon as it is loaded:



A similar approach is to load the image virtually with JavaScript and once it is loaded assign the src to the image. This is done to prevent the image from showing before it is totally loaded.





var $img = $('img.some_img'),

  $img_created_with_js = $('<img src=' + $img.attr('data-src_of_original_img') + '>');



$img_created_with_js

  .on('load', function() {



    $img.attr('src', $img.attr('data-src_of_original_img'));



  });

.some_img {

  width: 100%;

}

<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>

  <img src=data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 data-src_of_original_img=https://i.imgur.com/Lcsolww.jpg alt= class=some_img>







Both methods could be applied to an image. For example: you could wait until the user scrolls where the image is and then start to load it, but not show until it is fully loaded.





Resources:




[#59425] Thursday, January 5, 2017, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
viridianaw
Add To Favorites
Follow
Total Points: 154
Total Questions: 94
Total Answers: 89
Location: South Georgia
Member since Sun, Aug 8, 2021
3 Years ago
;