Broken image about react-masonry-component HOT 5 CLOSED

Hi @Hazantip

You can probably create a custom image component that will handle this for you. If I understood correctly, You want to first have a default placeholder (img1) which will either switch out for the actual image (img2a) or the 'broken image' placeholder (img2b) if img2a is unavailable - is this correct?

In this situation I would probably have img1 as the default img.src value, and then make an async request for img2a. When the response comes back successful, I would change the img.src value to the img2a path. If the response is unsuccessful, you have a choice of trying again or updating the value of img.src to that of the img2b path.

as an alternative to making manual requests for images, you could also use a second img tag with display: none. When the onLoad function is executed you have a successful image request and you can make this img tag visible, and the original one display: none. You can listen for onError to check if the image is broken.

Finally, you can also consider using a background image (CSS) for img1. If your CSS loads first it should be visible while img2a loads over it. You will have to experiment to find what works best for your situation,

Hope that helps!

from react-masonry-component.

I'm also into this. So far I've found that;

1. You can convert your img into an external component and use AJAX to test the image and return the template if positive. Didn't test this through, since the async affected other components.
2. Call the onload event like:
   <img src={image} onClick={(e) => (this._handleClick(e, item)) } onLoad={(e) => (this._onImgLoad(e, item)) } />
   You'll probably need to change the app state or call this.forceUpdate() to show the changes on the DOM.
3. :

        <Masonry
          className={'ui-grid'}
          elementType={'ul'}
          options={masonryOptions}
          disableImagesLoaded={false}
          updateOnEachImageLoad={true}
          onImagesLoaded={this._onImgLoad}
        >

The problem I currently have with 2. and 3. is that even after a forceUpdate(), Masonry seems to not to update the grid, or updates it in a way that later triggers a rearange on scroll.

from react-masonry-component.

Thanks everyone! I tried to find solution under default callback function
onImagesLoaded={this.handleImagesLoaded},
cause inside it we can access to some variable like images
handleImagesLoaded(images) {....}
and this variable give us some info about loaded images, process, and isAnyBroken; i thought that there was some way to with this check each images on is it loaded.

At this moment is solved my problem this way:
<img style={{ 'transition': '1s ease', 'opacity': 0 }} onLoad={(e) => { e.target.style.opacity = 1; }} className="feed-grid-img" src={obj.data.cover.coverImage.url} alt={obj.data.cover.title} />

Default callback function i use just for reveal all grid with checking is loaded all, then show grid with placeholders, and then with img onLoad reveal each picture

handleImagesLoaded(images) { const isAllLoaded = images.images.length === images.progressedCount; is (isAllLoaded) { ...reveal } }

from react-masonry-component.

@Hazantip I tested a similar solution, and one thing I noticed is that sometimes, after a grid refresh, the first element on the grid wasn't triggering the onload event.
Not sure if that was caused by something on my code, but worth double check, just in case.

from react-masonry-component.

I'm going to close this issue. Please feel free to reopen to discuss further if needed.

from react-masonry-component.