Не появляется preloader?
Не появляется preloader. Пробовал в networke замедлять интернет и все равно не вижу. Проверял появление элемента в html. Вроде как тоже не появился.
Код компоненты preloader
import React from "react"; import preloader from "../../../acces/img/5.gif" const Preloader = () => { <div><img src={preloader}/> </div> } export default Preloader |
import React from "react"; import preloader from "../../../acces/img/5.gif" const Preloader = () => { <div><img src={preloader}/> </div> } export default Preloader
Код с preloader
mport React from "react" import { connect } from "react-redux" import { followAC, unFollowowAC, setUsersAC, setCurrentPageAC, setUsersTotalCountAC, toggleAC } from "../../redux/user-reducer" import Preloader from "../Dialogs/common/Preloader"; import axios from "axios"; import User from "./User"; class UsersApiComponent extends React.Component { componentDidMount() { this.props.toggleFetching(true) axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${this.props.currentUsers}&count=${this.props.pageSize}`) .then(response => { this.props.toggleFetching(false) this.props.setUsers(response.data.items); }) }; onPostChanged = (pageNumber) => { this.props.toggleFetching(true) this.props.setCurrentUsers(pageNumber); axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${pageNumber}&count=${this.props.pageSize}`) .then(response => { this.props.toggleFetching(false) this.props.setUsers(response.data.items) }) } render () { return <> {this.props.isFetching ? <Preloader/> : null } <User totalCountUser={this.props.totalCountUser} pageSize={this.props.pageSize} currentUsers={this.props.currentUsers} users={this.props.users} onPostChanged={this.onPostChanged} unFollowow={this.props.unFollowow} follow={this.props.follow} /> </> } } let mapStateToProps = (state) => { return { users: state.usersPage.users, pageSize: state.usersPage.pageSize, totalCountUser: state.usersPage.totalCountUser, currentUsers: state.usersPage.currentUsers, isFetching: state.usersPage.isFetching, } } let mapDispatchToProps = (dispatch) => { return { follow: (userId) => { dispatch(followAC(userId)) }, unFollowow: (userId) => { dispatch(unFollowowAC(userId)) }, setUsers: (user) => { dispatch(setUsersAC(user)) },setCurrentUsers: (pageNumber) => { dispatch(setCurrentPageAC(pageNumber)) }, setTotalUsersCount: (totalCount) => { dispatch(setUsersTotalCountAC(totalCount)) }, toggleFetching: (isFetching) => { dispatch(toggleAC(isFetching)) } } } export default connect(mapStateToProps, mapDispatchToProps)(UsersApiComponent) |
mport React from "react" import { connect } from "react-redux" import { followAC, unFollowowAC, setUsersAC, setCurrentPageAC, setUsersTotalCountAC, toggleAC } from "../../redux/user-reducer" import Preloader from "../Dialogs/common/Preloader"; import axios from "axios"; import User from "./User"; class UsersApiComponent extends React.Component { componentDidMount() { this.props.toggleFetching(true) axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${this.props.currentUsers}&count=${this.props.pageSize}`) .then(response => { this.props.toggleFetching(false) this.props.setUsers(response.data.items); }) }; onPostChanged = (pageNumber) => { this.props.toggleFetching(true) this.props.setCurrentUsers(pageNumber); axios.get(`https://social-network.samuraijs.com/api/1.0/users?page=${pageNumber}&count=${this.props.pageSize}`) .then(response => { this.props.toggleFetching(false) this.props.setUsers(response.data.items) }) } render () { return <> {this.props.isFetching ? <Preloader/> : null } <User totalCountUser={this.props.totalCountUser} pageSize={this.props.pageSize} currentUsers={this.props.currentUsers} users={this.props.users} onPostChanged={this.onPostChanged} unFollowow={this.props.unFollowow} follow={this.props.follow} /> </> } } let mapStateToProps = (state) => { return { users: state.usersPage.users, pageSize: state.usersPage.pageSize, totalCountUser: state.usersPage.totalCountUser, currentUsers: state.usersPage.currentUsers, isFetching: state.usersPage.isFetching, } } let mapDispatchToProps = (dispatch) => { return { follow: (userId) => { dispatch(followAC(userId)) }, unFollowow: (userId) => { dispatch(unFollowowAC(userId)) }, setUsers: (user) => { dispatch(setUsersAC(user)) },setCurrentUsers: (pageNumber) => { dispatch(setCurrentPageAC(pageNumber)) }, setTotalUsersCount: (totalCount) => { dispatch(setUsersTotalCountAC(totalCount)) }, toggleFetching: (isFetching) => { dispatch(toggleAC(isFetching)) } } } export default connect(mapStateToProps, mapDispatchToProps)(UsersApiComponent)
Дополнительно:
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы решить проблему с отсутствием preloader на вашем сайте, необходимо убедиться, что код загрузки preloader правильно реализован. Давайте рассмотрим несколько возможных причин и способов их исправления:
1. Проверьте правильность подключения CSS и JS файлов для preloader. Убедитесь, что пути к файлам указаны верно и файлы доступны по указанным URL. Вот пример кода подключения файлов:
2. Убедитесь, что код инициализации preloader вызывается после загрузки DOM. Для этого оберните инициализацию в событие window.onload или $(document).ready() (если используется jQuery). Вот пример кода:
window.onload = function() { // код инициализации preloader };
3. Проверьте, что HTML-элементы preloader правильно добавлены в вашу HTML-структуру. Обычно preloader представлен в виде div с классом или id, который содержит анимацию загрузки. Вот пример HTML-кода:
<div id="preloader"> <!-- анимация загрузки --> </div><div id="preloader"> <!-- анимация загрузки --> </div>
4. Проверьте CSS стили для preloader. Убедитесь, что стили правильно определены и не перекрываются другими стилями на странице. Вот пример CSS-стилей для preloader:
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); z-index: 9999; /* другие стили */ }
Следуя этим рекомендациям и проверяя каждый шаг, вы сможете успешно решить проблему с отсутствием preloader на вашем сайте. Если проблема все еще не решена, пожалуйста, предоставьте больше информации о вашем коде и структуре сайта для дальнейшей помощи.