Giter VIP home page Giter VIP logo

Comments (9)

obykoo avatar obykoo commented on August 10, 2024

I also tried with full path and looked into network activity , they are fetch sucessfully from server with 200 OK , but I am still getting spammed in console with "Images failed to preload"

from react-preload.

urbantumbleweed avatar urbantumbleweed commented on August 10, 2024

👍

from react-preload.

sambernard avatar sambernard commented on August 10, 2024

@obykoo can you put together a codepen for me to look at?

from react-preload.

obykoo avatar obykoo commented on August 10, 2024

Hello, I put together this codepen:
https://codepen.io/anon/pen/dvvwML?editors=1111
There is no warning in console with codepen.

However when I try same code on my localhost , there is warning...

import React from 'react';
import Preload from 'react-preload';
import Select from 'react-select';

export default class App extends React.Component {

    render() {
        let images=["http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/5_kr6t52.png",
            "http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/4_wg4sg4.png",
            "http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/3_rl1hdy.png"];

        let optionsRender=[];
        optionsRender.push({value:"1",label: <span className="option"><img src="http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/5_kr6t52.png"></img>{"1"}</span> });
        optionsRender.push({value:"2",label: <span className="option"><img src="http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/4_wg4sg4.png"></img>{"2"}</span> });
        optionsRender.push({value:"3",label: <span className="option"><img src="http://res.cloudinary.com/dt4katy80/image/upload/v1489174402/3_rl1hdy.png"></img>{"3"}</span> });

        let loadSpan= <span className="loadspan">
                              <i className="spin fa fa-refresh"/>
                          </span>;

        return (<div>  <Preload
            loadingIndicator={loadSpan}
            images={images}
            autoResolveDelay={15000}
            resolveOnError={true}
            mountChildren={true}
        >
            <Select
                options={optionsRender}
                autosize={true}
                className={"Select"}
                clearable={false}
                searchable={false}
                autoload={true}
            />
        </Preload>

        </div>);
    }

}
ReactDOM.render(
      <App />
       ,
    document.getElementById('app')
);

Is there any way I can at least turn off console.warn?

from react-preload.

sambernard avatar sambernard commented on August 10, 2024

No- there's not an option to remove the warning. When accessing it locally are you using a domain (eg http://localhost), or just viewing a file directly in your browser?

from react-preload.

obykoo avatar obykoo commented on August 10, 2024

When using localy while developing I am acessing them by domain name. Anyway this is not problem because code I posted above giving me same warning and images there are hosted externally as you can see.

from react-preload.

sambernard avatar sambernard commented on August 10, 2024

I'm actually not seeing the warning when I look. What browser are you using?

from react-preload.

Mesoptier avatar Mesoptier commented on August 10, 2024

I've been receiving the same warning, even though the Network inspector shows all images to load correctly (status 200).

The warning gets thrown in the _handleSuccess method (modules/Preload.js#L82). I guess the assumption was made that this.autoResolveTimeout would only be set if the timeout had completed, which of course is not the case. This means that the warning will always get thrown if you have the autoResolveDelay prop set.

This can be easily fixed by moving the warning and call to _handleSuccess into a separate callback (modules/Preload.js#L67). Like this:

this.autoResolveTimeout = setTimeout(() => {
    console.warn('images failed to preload, auto resolving');
    this._handleSuccess();
}, this.props.autoResolveDelay);

from react-preload.

sambernard avatar sambernard commented on August 10, 2024

This has been resolved: 99c953b#diff-44a458d379c4c083b784f6b5b953a210L89

from react-preload.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.