diff --git a/change/react-native-windows-2020-04-29-15-37-41-imageonload.json b/change/react-native-windows-2020-04-29-15-37-41-imageonload.json new file mode 100644 index 00000000000..714ebefda8d --- /dev/null +++ b/change/react-native-windows-2020-04-29-15-37-41-imageonload.json @@ -0,0 +1,9 @@ +{ + "type": "prerelease", + "comment": "Fire onLoad event when a bitmap image is opeed", + "packageName": "react-native-windows", + "email": "lamdoan@microsoft.com", + "commit": "22edad7ea69232ae7636424c237df4eee7577f54", + "dependentChangeType": "patch", + "date": "2020-04-29T22:37:41.642Z" +} \ No newline at end of file diff --git a/vnext/ReactUWP/Views/Image/ReactImage.cpp b/vnext/ReactUWP/Views/Image/ReactImage.cpp index 791a3776ecc..7ec70a89aca 100644 --- a/vnext/ReactUWP/Views/Image/ReactImage.cpp +++ b/vnext/ReactUWP/Views/Image/ReactImage.cpp @@ -213,10 +213,8 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) { if (createImageBrush) { imageBrush = winrt::ImageBrush{}; - // ImageOpened and ImageFailed are mutually exclusive. One event of the other will - // always fire whenever an ImageBrush has the ImageSource value set or reset. - strong_this->m_imageBrushOpenedRevoker = imageBrush.ImageOpened( - winrt::auto_revoke, [weak_this, imageBrush, fireLoadEndEvent](const auto &, const auto &) { + strong_this->m_imageBrushOpenedRevoker = + imageBrush.ImageOpened(winrt::auto_revoke, [weak_this, imageBrush](const auto &, const auto &) { if (auto strong_this{weak_this.get()}) { if (auto bitmap{imageBrush.ImageSource().try_as()}) { strong_this->m_imageSource.height = bitmap.PixelHeight(); @@ -224,18 +222,6 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) { } imageBrush.Stretch(strong_this->ResizeModeToStretch(strong_this->m_resizeMode)); - - if (fireLoadEndEvent) { - strong_this->m_onLoadEndEvent(*strong_this, true); - } - } - }); - - strong_this->m_imageBrushFailedRevoker = - imageBrush.ImageFailed(winrt::auto_revoke, [weak_this, fireLoadEndEvent](const auto &, const auto &) { - const auto strong_this{weak_this.get()}; - if (strong_this && fireLoadEndEvent) { - strong_this->m_onLoadEndEvent(*strong_this, false); } }); } @@ -274,7 +260,24 @@ winrt::fire_and_forget ReactImage::SetBackground(bool fireLoadEndEvent) { bitmapImage = winrt::BitmapImage{}; strong_this->m_bitmapImageOpened = bitmapImage.ImageOpened( - winrt::auto_revoke, [imageBrush](const auto &, const auto &) { imageBrush.Opacity(1); }); + winrt::auto_revoke, [imageBrush, weak_this, fireLoadEndEvent](const auto &, const auto &) { + imageBrush.Opacity(1); + + auto strong_this{weak_this.get()}; + if (strong_this && fireLoadEndEvent) { + strong_this->m_onLoadEndEvent(*strong_this, true); + } + }); + + strong_this->m_bitmapImageFailed = bitmapImage.ImageFailed( + winrt::auto_revoke, [imageBrush, weak_this, fireLoadEndEvent](const auto &, const auto &) { + imageBrush.Opacity(1); + + auto strong_this{weak_this.get()}; + if (strong_this && fireLoadEndEvent) { + strong_this->m_onLoadEndEvent(*strong_this, false); + } + }); imageBrush.ImageSource(bitmapImage); } diff --git a/vnext/ReactUWP/Views/Image/ReactImage.h b/vnext/ReactUWP/Views/Image/ReactImage.h index 4a8ac619460..e73ca246581 100644 --- a/vnext/ReactUWP/Views/Image/ReactImage.h +++ b/vnext/ReactUWP/Views/Image/ReactImage.h @@ -67,8 +67,8 @@ struct ReactImage : xaml::Controls::GridT { xaml::FrameworkElement::SizeChanged_revoker m_sizeChangedRevoker; xaml::Media::LoadedImageSurface::LoadCompleted_revoker m_surfaceLoadedRevoker; xaml::Media::Imaging::BitmapImage::ImageOpened_revoker m_bitmapImageOpened; + xaml::Media::Imaging::BitmapImage::ImageFailed_revoker m_bitmapImageFailed; xaml::Media::ImageBrush::ImageOpened_revoker m_imageBrushOpenedRevoker; - xaml::Media::ImageBrush::ImageFailed_revoker m_imageBrushFailedRevoker; xaml::Media::Imaging::SvgImageSource::Opened_revoker m_svgImageSourceOpenedRevoker; xaml::Media::Imaging::SvgImageSource::OpenFailed_revoker m_svgImageSourceOpenFailedRevoker; };