Create several new Image() objects with dynamic src javascript

Question

I'm appending a large image when it's done loading and fading it in which all works well. My problem is when there is more than one image. Then it's only the last small image that get replaced (with the first image). I can't seem to figure out how to separate them. The src URLs are retrieved trough a data-attribute. Codepen with two images. (with one image it works as intended).

window.onload = function() {

  var ImageBlur = function (element) {
    var self = this;

    this.element = element;
    this.$element = $(element); 
  };

  var placeholder = $('.js-image-blur', this.$element);
  var small = $('.js-small-image', placeholder);

  // Load large image
  var imgLarge = new Image();
  imgLarge.src = placeholder.data('largeimage');
  imgLarge.className = "is-large-image";
  imgLarge.onload = function () {

    $(imgLarge).addClass('is-loaded');

    // Remove small image
    setTimeout(function(){
      $(small).remove();
    }, 1200);

  };

  $(imgLarge).each(function() {
    placeholder.append(this);
  });

  return ImageBlur;

};

Why are you mixing native DOM and jQuery? – Michał Perłakowski Jan 18 '16 at 21:40 — Michał Perłakowski, Jan 18 '16 at 21:40

score 1 · Accepted Answer · answered Jan 18 '16 at 21:52

I would rewrite the code like that:

$(function() {
  $(".js-image-blur").each(function() {
    var $this = $(this);
    var $smallImage = $(".js-small-image", $this);
    var $largeImage = $("<img>").attr({
      src: $this.data("largeimage"),
      class: "is-large-image"
    }).load(function() {
      $(this).addClass("is-loaded");
      setTimeout(function() {
        $smallImage.remove();
      }, 1200);
    });
    $this.append($largeImage);
  });
});

.image-blur {
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.image-blur img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  width: auto;
  min-width: 100%;
  transition: opacity 1s linear;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.image-blur img.small-image {
  -webkit-filter: blur(20px);
  filter: blur(20px);
  position: absolute;
}
.image-blur img.is-large-image {
  opacity: 0;
}
.image-blur img.is-loaded {
  opacity: 1;
}
body {
  margin: 3em 0;
  background: silver;
}
.container {
  position: relative;
  margin: 3em auto;
  min-width: 320px;
  min-height: 560px;
  border-top: 3px solid black;
  border-bottom: 3px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="container">
      <div class="image-blur  js-image-blur" data-component="image-blur" data-largeimage="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-full.jpg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-small.jpg" alt="" class="small-image  js-small-image" />
      </div>
    </section>

    <section class="container">
      <div class="image-blur  js-image-blur" data-component="image-blur" data-largeimage="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-2-full.jpg">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/67710/1600-2-small.jpg" alt="" class="small-image  js-small-image" />
      </div>
    </section>

See updated Codepen.

frogatto · Answer 2 · 2016-01-18T21:50:00.753

0

If you want to load images silently and fade them in, a simple solution would be:

<img class="load-fade" src="url" />

And in your JavaScript:

$('.load-fade').hide().load(function() {
   $(this).fadeIn(1000);
});

edited Jan 18 '16 at 21:50

answered Jan 18 '16 at 21:44

frogatto

28,539
11
83
129

@Gothdo what issue do you have with an inline `onload`? – hopkins-matt Jan 18 '16 at 21:48
@hopkins-matt It's just plain evil. – Michał Perłakowski Jan 18 '16 at 21:52
@hopkins-matt See [Why is using onClick() in HTML a bad practice?](http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice). – Michał Perłakowski Jan 18 '16 at 21:54
@Gothdo Thanks for the link! I figured it'd be more of a security issue or something that caused you to not like it. From what I gathered from that question, avoiding inline `onclick` just keeps languages separate and allows adding event listeners to multiple elements at once. Essentially there are just more benefits of not using it, than disadvantages of using it? – hopkins-matt Jan 19 '16 at 04:51

Create several new Image() objects with dynamic src javascript

2 Answers2