data-src image loading.

[tholman]

When loading an image with data-src, there is the potential to have a situation where the image isn't loaded already, which means there is a delay opening the image for viewing... within this delay, clicking around can confuse intense.js into thinking images are open when they aren't.

The fix: Add a small spinner, which will activate when the image isn't fully loaded, and will only really be on the screen while the image loads. Clicking the background while the spinner is open, will cancel the load, and hide intense straight away.

Merging in #7 and #9 into this issue, and closing them off as duplicates, as they are each small parts of the 1 issue.

[BugHunter2k]

Is this fixed in the current version? I like your Script and I would like to use it on my photo-blog for fullscreen view.

[myconcretelab]

Same Question and issue.

[tholman]

It isn't yet, no :(

[benjaminsehl]

Is there any plan to fix this? I'm barely above noob level but will have a look at the source. Any tips for where I might look for callbacks, or where I should be adding one in?

[BugHunter2k]

@bsehl this is fixed by adding state classes on the element (https://github.com/myconcretelab/intense-images/commit/c498df1ec7e4f249bd08c48d3de5dbfa954e9484) you are now able to add a spinner onto the images.

Simply add a new css-rule to your stylesheets to get an loading animation, something like: (.intense is the css-class of the image, .loading is added by intense image-script, ::after adds an overlay with the loading.gif)

.intense.loading::after {
  background: rgba(255, 255, 255, 0.8) url("/image/loading.gif") no-repeat scroll center 170px;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

Demo: http://www.ingosfotoblog.de/2015/09/05/rote-dahlie-bei-uns-am-balkon/ (klick the large image)

[tiagogon]

would love to have this fixed as well. will try the loading.gif as a preventive thing.

[panstav]

How about having a callback option for image-load-start and image-load-end?

loader.start() and .stop() could be provied via intense.config({ loader: { start: showMySpinner, stop: hideMySpinner } });

[tholman]

Also valid, I changed the way config works slightly. But this'd definitely be the way to go

[panstav]

Right, so now it would be possible to attach a loader with both intense( elements, configObj ) AND / OR intense.config( configObj )